jquery實現(xiàn)拖拽添加元素功能

更新時間：2020年12月01日 10:13:53 作者：shadow_yi_0416

這篇文章主要為大家詳細介紹了jquery實現(xiàn)拖拽添加元素功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery實現(xiàn)拖拽添加元素的具體代碼，供大家參考，具體內容如下

需求

1.頁面上有兩個不同的容器，拖拽a容器的元素添加到b容器中；
2.a保持原位不dogn動，b增加新的元素，要實現(xiàn)的效果如下：
3.點擊b容器中的元素移除元素

首先準備兩個容器
頁面效果如下

<div class="bigBox">
 <div id="aBox">
 <p class="drag" draggable="true" data-id="我是a元素的第一個">我是a元素</p>
 <p class="drag" draggable="true" data-id="我是a元素的第二個">我是a元素</p>
 <p class="drag" draggable="true" data-id="我是a元素的第三個">我是a元素</p>
 <p class="drag" draggable="true" data-id="我是a元素的第四個">我是a元素</p>
 
 </div>
 <div id="bBox">
 
 </div>
</div>

在css中定義好樣式，區(qū)分兩個容器

.bigBox {
 display: flex;
 width: 100%;
 height: 400px;
 }
 #aBox {
 width: 40%;
 height: 100%;
 background-color: pink;
 }
 #aBox > p {
 line-height: 30px;
 padding: 4px;
 background-color: yellow;
 }
 #bBox {
 width: 40%;
 height: 100%;
 background-color: #00BCF4;
 }
 .span {
 border: 1px slid #ccc;
 border-radius: 12px;
 display: inline-block;
 padding: 3px;
 background-color: red;
 }

封裝一個添加元素的方法

function add(addId, htmlId) {
 var listItem = { // 接收綁定的屬性值，并賦值給數(shù)組的某一項
  name: addId
 }
 var obj = {};
 var html = ''
  coloList.push(listItem)
  coloList = coloList.reduce(function(item, next) { // 對數(shù)組進行去重處理
  obj[next.name] ? '' : obj[next.name] = true && item.push(next);
  return item;
  }, []);
  for (var i = 0; i < coloList.length; i++) { // 對去重后的數(shù)組渲染到頁面
  html += '<span draggable="true" class="span" data-id=' + coloList[i].name + ' >' + coloList[i].name + '</span>'
  }
 htmlId.html(html) // b容器要展示的數(shù)據(jù)
 }

以下是拖拽的方法函數(shù)

var coloList = []
 $(document).on('dragstart', '.drag', function(e) { // 拖拽事件綁定到元素上
 var dudataId = $(this).attr("data-id") // 獲取到元素綁定的屬性值
 $(document).on('dragenter', '#bBox', function() {
 })
 $(document).on('dragover', '#bBox', function() { // 這行代碼一定要有，阻止事件的默認行為，才能觸發(fā)鼠標放下的事件
  event.preventDefault()
 })
 $('#bBox').on('drop', function(e) { // // 鼠標放下事件被觸發(fā)把元素添加到bbox中
  add(dudataId, $('#bBox'))
 })
 $(document).on('drop', '#bBox', function() { // 定時器解綁事件，不然會一直綁定事件，重復添加數(shù)據(jù)
  var timer = setInterval(function() { 
  $('#bBox').off('dragover')
  $('#bBox').off('dragenter')
  $('#bBox').off('drop')
  clearInterval(timer);
  }, 30)
 })
 })

移除bbox的事件的方法

function remove(removeId, htmlId) {
 console.log(removeId, htmlId)
 var index = -1
 var html = ''
 // var list = coloList
 for (var k = 0; k < coloList.length; k++) {
  if (removeId === coloList[k].name) {
  index = k
  break
  } else {
  index = -1
  }
 }
 if (index != -1) {
  coloList.splice(index, 1)
  // coloList = list
  for (var i = 0; i < coloList.length; i++) { // 對去重后的數(shù)組渲染到頁面
  html += '<span class="span" data-id=' + coloList[i].name + '>' + coloList[i].name + '</span>'
  }
  htmlId.html(html)
 } else {
  alert('暫無可移除的維度')
 }
}

綁定點擊事件

$('#bBox').on('click', '.span', function(e) {
 remove($(this).attr("data-id"), $('#bBox')) // 參數(shù)：動態(tài)添加的屬性值當前點擊的元素，度量列表，維度html
 })

這樣就完成了呀。

以下是完整的代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 .bigBox {
 display: flex;
 width: 100%;
 height: 400px;
 }
 #aBox {
 width: 40%;
 height: 100%;
 background-color: pink;
 }
 #aBox > p {
 line-height: 30px;
 padding: 4px;
 background-color: yellow;
 }
 #bBox {
 width: 40%;
 height: 100%;
 background-color: #00BCF4;
 }
 .span {
 border: 1px slid #ccc;
 border-radius: 12px;
 display: inline-block;
 padding: 3px;
 background-color: red;
 }
 </style>
 </head>
 <body>
 <div class="bigBox">
 <div id="aBox">
 <p class="drag" draggable="true" data-id="我是a元素的第一個">我是a元素</p>
 <p class="drag" draggable="true" data-id="我是a元素的第二個">我是a元素</p>
 <p class="drag" draggable="true" data-id="我是a元素的第三個">我是a元素</p>
 <p class="drag" draggable="true" data-id="我是a元素的第四個">我是a元素</p>
 
 </div>
 <div id="bBox">
 
 </div>
 </div>
 <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 var coloList = []
 $(document).on('dragstart', '.drag', function(e) {
 var dudataId = $(this).attr("data-id")
 $(document).on('dragenter', '#bBox', function() {
 })
 $(document).on('dragover', '#bBox', function() {
  event.preventDefault()
 })
 $('#bBox').on('drop', function(e) {
  add(dudataId, $('#bBox'))
 })
 $(document).on('drop', '#bBox', function() {
  var timer = setInterval(function() {
  $('#bBox').off('dragover')
  $('#bBox').off('dragenter')
  $('#bBox').off('drop')
  clearInterval(timer);
  }, 30)
 })
 })
 $('#bBox').on('click', '.span', function(e) {
 remove($(this).attr("data-id"), $('#bBox')) // 參數(shù)：動態(tài)添加的屬性值當前點擊的元素，度量列表，維度html
 })
 function add(addId, htmlId) {
 var listItem = { // 接收綁定的屬性值，并賦值給數(shù)組的某一項
  name: addId
 }
 // list.push(weiduListItem)
 var obj = {};
 var html = ''
  // className = 'remove'
  coloList.push(listItem)
  coloList = coloList.reduce(function(item, next) { // 對數(shù)組進行去重處理
  obj[next.name] ? '' : obj[next.name] = true && item.push(next);
  return item;
  }, []);
  for (var i = 0; i < coloList.length; i++) { // 對去重后的數(shù)組渲染到頁面
  html += '<span draggable="true" class="span" data-id=' + coloList[i].name + ' >' + coloList[i].name + '</span>'
  }

 
 // weiduList = lis
 htmlId.html(html) // 維度的數(shù)組
 }
 // // 移除頁面中維度和度量的元素
 function remove(removeId, htmlId) {
 console.log(removeId, htmlId)
 var index = -1
 var html = ''
 // var list = coloList
 for (var k = 0; k < coloList.length; k++) {
  if (removeId === coloList[k].name) {
  index = k
  break
  } else {
  index = -1
  }
 }
 if (index != -1) {
  coloList.splice(index, 1)
  // coloList = list
  for (var i = 0; i < coloList.length; i++) { // 對去重后的數(shù)組渲染到頁面
  html += '<span class="span" data-id=' + coloList[i].name + '>' + coloList[i].name + '</span>'
  }
  htmlId.html(html)
 } else {
  alert('暫無可移除的維度')
 }
 }
 
 </script>
 </body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: