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 相关文章推荐
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
Jquery-data的三种用法
Apr 18 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
JS表的模拟方法
2015/02/05 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
Python绘制3D图形
2018/05/03 Python
python主线程捕获子线程的方法
2018/06/17 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
技术总监个人的自我评价范文
2013/12/18 职场文书
机关搬迁方案
2014/05/18 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
升职感谢信
2015/01/22 职场文书
2015年人事科工作总结
2015/04/28 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书