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插件
Mar 29 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 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自动获取关键字的方法
2015/01/06 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
python3中rank函数的用法
2019/11/27 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
会计主管岗位职责范文
2013/11/08 职场文书
仓库组长岗位职责
2014/01/29 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
篮球比赛策划方案
2014/06/05 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
Python访问Redis的详细操作
2021/06/26 Python
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
Python必备技巧之字符数据操作详解
2022/03/23 Python
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang