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自定义图片上传插件实例代码
Apr 04 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jQuery实现查看图片功能
Dec 01 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
python打包多类型文件的操作方法
2020/09/21 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
信息技术专业个人自我评价
2013/12/11 职场文书
专项法律服务方案
2014/06/11 职场文书
教师求职信
2014/06/17 职场文书
信用卡工资证明格式
2014/09/13 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
教学督导岗位职责
2015/04/10 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python