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

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

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

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

需求

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

首先準(zhǔn)備兩個(gè)容器
頁面效果如下

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

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

.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;
 }

封裝一個(gè)添加元素的方法

function add(addId, htmlId) {
 var listItem = { // 接收綁定的屬性值，并賦值給數(shù)組的某一項(xiàng)
  name: addId
 }
 var obj = {};
 var html = ''
  coloList.push(listItem)
  coloList = coloList.reduce(function(item, next) { // 對(duì)數(shù)組進(jìn)行去重處理
  obj[next.name] ? '' : obj[next.name] = true && item.push(next);
  return item;
  }, []);
  for (var i = 0; i < coloList.length; i++) { // 對(duì)去重后的數(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() { // 這行代碼一定要有，阻止事件的默認(rèn)行為，才能觸發(fā)鼠標(biāo)放下的事件
  event.preventDefault()
 })
 $('#bBox').on('drop', function(e) { // // 鼠標(biāo)放下事件被觸發(fā)把元素添加到bbox中
  add(dudataId, $('#bBox'))
 })
 $(document).on('drop', '#bBox', function() { // 定時(shí)器解綁事件，不然會(huì)一直綁定事件，重復(fù)添加數(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++) { // 對(duì)去重后的數(shù)組渲染到頁面
  html += '<span class="span" data-id=' + coloList[i].name + '>' + coloList[i].name + '</span>'
  }
  htmlId.html(html)
 } else {
  alert('暫無可移除的維度')
 }
}

綁定點(diǎn)擊事件

$('#bBox').on('click', '.span', function(e) {
 remove($(this).attr("data-id"), $('#bBox')) // 參數(shù)：動(dòng)態(tài)添加的屬性值當(dāng)前點(diǎn)擊的元素，度量列表，維度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元素的第一個(gè)">我是a元素</p>
 <p class="drag" draggable="true" data-id="我是a元素的第二個(gè)">我是a元素</p>
 <p class="drag" draggable="true" data-id="我是a元素的第三個(gè)">我是a元素</p>
 <p class="drag" draggable="true" data-id="我是a元素的第四個(gè)">我是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ù)：動(dòng)態(tài)添加的屬性值當(dāng)前點(diǎn)擊的元素，度量列表，維度html
 })
 function add(addId, htmlId) {
 var listItem = { // 接收綁定的屬性值，并賦值給數(shù)組的某一項(xiàng)
  name: addId
 }
 // list.push(weiduListItem)
 var obj = {};
 var html = ''
  // className = 'remove'
  coloList.push(listItem)
  coloList = coloList.reduce(function(item, next) { // 對(duì)數(shù)組進(jìn)行去重處理
  obj[next.name] ? '' : obj[next.name] = true && item.push(next);
  return item;
  }, []);
  for (var i = 0; i < coloList.length; i++) { // 對(duì)去重后的數(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++) { // 對(duì)去重后的數(shù)組渲染到頁面
  html += '<span class="span" data-id=' + coloList[i].name + '>' + coloList[i].name + '</span>'
  }
  htmlId.html(html)
 } else {
  alert('暫無可移除的維度')
 }
 }
 
 </script>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: