jQuery实现容器间的元素拖拽功能


Posted in jQuery onDecember 01, 2020

本文实例为大家分享了jQuery实现容器间的元素拖拽,供大家参考,具体内容如下

在html中准备三个容器

<div class="container">
 <ul>
 <li>A</li>
 <li>B</li>
 <li>C</li>
 <li>e</li>
 <li>f</li>
 <li>g</li>
 </ul>
 <ul></ul>
 <ul></ul>
</div>

在css中,给容器写上样式相应的样式

.container ul{
 width: 350px;
 padding: 15px;
 min-height:300px;
 background-color:#FFFFF0;
 margin:20px;
 display: inline-block;
 border-radius: 5px;
 border: 1px solid #C6C8CA;
 }
 .container ul li{
 display: block;
 float: left;
 width: 350px;
 height: 35px;
 line-height: 35px;
 border-radius: 4px;
 margin: 0;
 padding: 0;
 list-style: none;
 background-color:yellow;
 margin-bottom:10px;
 -moz-user-select: none;
 user-select: none;
 text-indent: 10px;
 color: #555;
}

js代码

首先引用jquery的js文件

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

在script的标签中,开始写js代码。

<script type="text/javascript">
 $(function() {
 // 初始化容器
 drag.init('container');
 });

 //拖拽
 var drag = {
 class_name: null, //允许放置的容器
 permitDrag: false, //是否允许移动标识
 _x: 0, //节点x坐标
 _y: 0, //节点y坐标
 _left: 0, //光标与节点坐标的距离
 _top: 0, //光标与节点坐标的距离
 old_elm: null, //拖拽原节点
 tmp_elm: null, //跟随光标移动的临时节点
 new_elm: null, //拖拽完成后添加的新节点
 //初始化
 init: function(className) {
  //允许拖拽节点的父容器的classname(可按照需要,修改为id或其他)
  drag.class_name = className;
  //监听鼠标按下事件,动态绑定要拖拽的节点(因为节点可能是动态添加的)
  $('.' + drag.class_name).on('mousedown', 'ul li', function(event) {
  //当在允许拖拽的节点上监听到点击事件,将标识设置为可以拖拽
  drag.permitDrag = true;
  //获取到拖拽的原节点对象
  drag.old_elm = $(this);
  //执行开始拖拽的操作
  drag.mousedown(event);
  return false;
  });

  //监听鼠标移动
  $(document).mousemove(function(event) {
  //判断拖拽标识是否为允许,否则不进行操作
  if (!drag.permitDrag) return false;
  //执行移动的操作
  drag.mousemove(event);
  return false;
  });

  //监听鼠标放开
  $(document).mouseup(function(event) {
  //判断拖拽标识是否为允许,否则不进行操作
  if (!drag.permitDrag) return false;
  //拖拽结束后恢复标识到初始状态
  drag.permitDrag = false;
  //执行拖拽结束后的操作
  drag.mouseup(event);
  return false;
  });
 },

 //按下鼠标 执行的操作
 mousedown: function(event) {

  //1.克隆临时节点,跟随鼠标进行移动
  drag.tmp_elm = $(drag.old_elm).clone();

  //2.计算 节点 和 光标 的坐标
  drag._x = $(drag.old_elm).offset().left;
  drag._y = $(drag.old_elm).offset().top;

  var e = event || window.event;
  drag._left = e.pageX - drag._x;
  drag._top = e.pageY - drag._y;

  //3.修改克隆节点的坐标,实现跟随鼠标进行移动的效果
  $(drag.tmp_elm).css({
  'position': 'absolute',
  'background-color': '#FF8C69',
  'left': drag._x,
  'top': drag._y,
  });

  //4.添加临时节点
  tmp = $(drag.old_elm).parent().append(drag.tmp_elm);
  drag.tmp_elm = $(tmp).find(drag.tmp_elm);
  $(drag.tmp_elm).css('cursor', 'move');

 },

 //移动鼠标 执行的操作
 mousemove: function(event) {

  //2.计算坐标
  var e = event || window.event;
  var x = e.pageX - drag._left;
  var y = e.pageY - drag._top;
  var maxL = $(document).width() - $(drag.old_elm).outerWidth();
  var maxT = $(document).height() - $(drag.old_elm).outerHeight();
  //不允许超出浏览器范围
  x = x < 0 ? 0 : x;
  x = x > maxL ? maxL : x;
  y = y < 0 ? 0 : y;
  y = y > maxT ? maxT : y;

  //3.修改克隆节点的坐标
  $(drag.tmp_elm).css({
  'left': x,
  'top': y,
  });

  //判断当前容器是否允许放置节点
  $.each($('.' + drag.class_name + ' ul'), function(index, value) {

  //获取容器的坐标范围 (区域)
  var box_x = $(value).offset().left; //容器左上角x坐标
  var box_y = $(value).offset().top; //容器左上角y坐标
  var box_width = $(value).outerWidth(); //容器宽
  var box_height = $(value).outerHeight(); //容器高

  //给可以放置的容器加背景色
  if (e.pageX > box_x && e.pageX < box_x + box_width && e.pageY > box_y && e.pageY < box_y + box_height) {
  //判断是否不在原来的容器下(使用坐标进行判断:x、y任意一个坐标不等于原坐标,则表示不是原来的容器)
  if ($(value).offset().left !== drag.old_elm.parent().offset().left ||
  $(value).offset().top !== drag.old_elm.parent().offset().top) {

  $(value).css('background-color', '#FFEFD5');
  }
  } else {
  //恢复容器原背景色
  $(value).css('background-color', '#FFFFF0');
  }
  });
 },
 //放开鼠标 执行的操作
 mouseup: function(event) {
  //移除临时节点
  $(drag.tmp_elm).remove();
  //判断所在区域是否允许放置节点
  var e = event || window.event;
  $.each($('.' + drag.class_name + ' ul'), function(index, value) {
  //获取容器的坐标范围 (区域)
  var box_x = $(value).offset().left; //容器左上角x坐标
  var box_y = $(value).offset().top; //容器左上角y坐标
  var box_width = $(value).outerWidth(); //容器宽
  var box_height = $(value).outerHeight(); //容器高
  //判断放开鼠标位置是否想允许放置的容器范围内
  if (e.pageX > box_x && e.pageX < box_x - 0 + box_width && e.pageY > box_y && e.pageY < box_y - 0 + box_height) {
  //判断是否不在原来的容器下(使用坐标进行判断:x、y任意一个坐标不等于原坐标,则表示不是原来的容器)
  if ($(value).offset().left !== drag.old_elm.parent().offset().left ||
  $(value).offset().top !== drag.old_elm.parent().offset().top) {
  //向目标容器添加节点并删除原节点
  tmp = $(drag.old_elm).clone();
  var newObj = $(value).append(tmp);
  $(drag.old_elm).remove();
  //获取新添加节点的对象
  drag.new_elm = $(newObj).find(tmp);
  }
  }
  //恢复容器原背景色
  $(value).css('background-color', '#FFFFF0');
  });

 },

 };
</script>

最后实现的效果如下:

jQuery实现容器间的元素拖拽功能

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

jQuery 相关文章推荐
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery实现简单聊天室
Feb 08 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
JavaScript枚举选择jquery插件代码实例
Nov 17 #jQuery
如何在vue 中引入使用jquery
Nov 10 #jQuery
You might like
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
php简单统计在线人数的方法
2016/05/10 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
jQuery解决input超多的表单提交
2015/08/10 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
python绘制多个子图的实例
2019/07/07 Python
python模块导入的方法
2019/10/24 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
材料采购员岗位职责
2013/12/17 职场文书
美容院营销方案
2014/03/05 职场文书
企业业务员岗位职责
2014/03/14 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
财务内勤岗位职责
2014/04/17 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
高中英语教学反思范文
2016/03/02 职场文书
python缺失值填充方法示例代码
2022/12/24 Python