jquery實現拖拽新增元素功能

阿新 • • 發佈：2020-12-01

本文例項為大家分享了jquery實現拖拽新增元素的具體程式碼，供大家參考，具體內容如下

需求

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

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

jquery實現拖拽新增元素功能

<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中定義好樣式，區分兩個容器

.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 = { // 接收繫結的屬性值，並賦值給陣列的某一項
  name: addId
 }
 var obj = {};
 var html = ''
  coloList.push(listItem)
  coloList = coloList.reduce(function(item,next) { // 對陣列進行去重處理
  obj[next.name] ? '' : obj[next.name] = true && item.push(next);
  return item;
  },[]);
  for (var i = 0; i < coloList.length; i++) { // 對去重後的陣列渲染到頁面
  html += '<span draggable="true" class="span" data-id=' + coloList[i].name + ' >' + coloList[i].name + '</span>'
  }
 htmlId.html(html) // b容器要展示的資料
 }

以下是拖拽的方法函式

var coloList = []
 $(document).on('dragstart','.drag',function(e) { // 拖拽事件繫結到元素上
 var dudataId = $(this).attr("data-id") // 獲取到元素繫結的屬性值
 $(document).on('dragenter','#bBox',function() {
 })
 $(document).on('dragover',function() { // 這行程式碼一定要有，阻止事件的預設行為，才能觸發滑鼠放下的事件
  event.preventDefault()
 })
 $('#bBox').on('drop',function(e) { // // 滑鼠放下事件被觸發把元素新增到bbox中
  add(dudataId,$('#bBox'))
 })
 $(document).on('drop',function() { // 定時器解綁事件，不然會一直繫結事件，重複新增資料
  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++) { // 對去重後的陣列渲染到頁面
  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')) // 引數：動態新增的屬性值當前點選的元素，度量列表，維度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',function(e) {
 var dudataId = $(this).attr("data-id")
 $(document).on('dragenter',function() {
  event.preventDefault()
 })
 $('#bBox').on('drop',function(e) {
  add(dudataId,function() {
  var timer = setInterval(function() {
  $('#bBox').off('dragover')
  $('#bBox').off('dragenter')
  $('#bBox').off('drop')
  clearInterval(timer);
  },30)
 })
 })
 $('#bBox').on('click',$('#bBox')) // 引數：動態新增的屬性值當前點選的元素，度量列表，維度html
 })
 function add(addId,htmlId) {
 var listItem = { // 接收繫結的屬性值，並賦值給陣列的某一項
  name: addId
 }
 // list.push(weiduListItem)
 var obj = {};
 var html = ''
  // className = 'remove'
  coloList.push(listItem)
  coloList = coloList.reduce(function(item,[]);
  for (var i = 0; i < coloList.length; i++) { // 對去重後的陣列渲染到頁面
  html += '<span draggable="true" class="span" data-id=' + coloList[i].name + ' >' + coloList[i].name + '</span>'
  }

 
 // weiduList = lis
 htmlId.html(html) // 維度的陣列
 }
 // // 移除頁面中維度和度量的元素
 function remove(removeId,1)
  // coloList = list
  for (var i = 0; i < coloList.length; i++) { // 對去重後的陣列渲染到頁面
  html += '<span class="span" data-id=' + coloList[i].name + '>' + coloList[i].name + '</span>'
  }
  htmlId.html(html)
 } else {
  alert('暫無可移除的維度')
 }
 }
 
 </script>
 </body>
</html>

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