jquery实现拖拽添加元素功能


Posted in jQuery onDecember 01, 2020

本文实例为大家分享了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', '#bBox', function() { // 这行代码一定要有,阻止事件的默认行为,才能触发鼠标放下的事件
  event.preventDefault()
 })
 $('#bBox').on('drop', function(e) { // // 鼠标放下事件被触发把元素添加到bbox中
  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的事件的方法

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', '.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')) // 参数:动态添加的属性值当前点击的元素,度量列表,维度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, 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>'
  }

 
 // weiduList = lis
 htmlId.html(html) // 维度的数组
 }
 // // 移除页面中维度和度量的元素
 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('暂无可移除的维度')
 }
 }
 
 </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
jQuery实现可以扩展的日历
Dec 01 #jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 #jQuery
jQuery实现查看图片功能
Dec 01 #jQuery
基于jQuery拖拽事件的封装
Nov 29 #jQuery
jQuery实现动态操作table行
Nov 23 #jQuery
jQuery-App输入框实现实时搜索
Nov 19 #jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 #jQuery
You might like
php 购物车完整实现代码
2014/06/05 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
php取得字符串首字母的方法
2015/03/25 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
python实现静态web服务器
2019/09/03 Python
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
师范生实习自我鉴定
2013/11/01 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
计算机实训报告总结
2014/11/05 职场文书
2015年春节标语口号
2014/12/09 职场文书
毕业典礼邀请函
2015/01/31 职场文书
地雷战观后感
2015/06/09 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL