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实现定时刷新功能代码
May 09 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jQuery表单选择器用法详解
Aug 22 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
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
jQuery最佳实践完整篇
2011/08/20 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
2014年最新学习全国两会精神心得
2014/03/17 职场文书
新党章心得体会
2014/09/04 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
服务行业标语口号
2015/12/26 职场文书
教师反邪教心得体会
2016/01/15 职场文书
财产分割协议书
2016/03/22 职场文书