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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery表单验证之密码确认
May 22 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 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.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
轻松掌握python设计模式之策略模式
2016/11/18 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
幼儿园教师获奖感言
2014/03/11 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
2014年副班长工作总结
2014/12/10 职场文书
小数乘法教学反思
2016/02/22 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
Python基础详解之描述符
2021/04/28 Python
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
MySQL创建管理HASH分区
2022/04/13 MySQL