利用jQuery实现简单的拖曳效果实例代码


Posted in jQuery onOctober 20, 2017

前言

本文主要给大家介绍了一种利用jQuery实现的简单拖曳效果,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

提出问题

如何实现将一个盒子里的元素拉到另外一个盒子里?

实现思路

  • 此操作包含的事件有 mousedown mousemove mouseup ,对这三个事件进行监听并进行相应的操作。
  • 操作设计的节点有:原节点,临时节点,新节点
  • 节点的移动涉及事件e的坐标
  • 操作元素使用JQUERY

代码实现

相应的注释在文中已有体现,请认真观看,你可以理解的。

  • 先定义一个对象 drag,包含拖曳需要用到的参数
  • 定义初始化 init 函数,监听各种鼠标事件
  • mousedown 事件:克隆一个临时节点。记录鼠标点击位置与节点的位置的X,Y差值,设置克隆副本的样式并在原容器中添加这个副本
  • mousemove 事件:判断鼠标的相对位移,设置副本绝对位置的XY,并对鼠标移出浏览器的情况进行处理;对三个UL进行遍历,在不是原容器的情况下,判断鼠标位置是否处于其他容器的范围内,如果是,修改鼠标当前容器的样式。
  • mouseup 时间:移除临时节点。对三个UL进行遍历,在不是原容器的情况下,判断鼠标位置是否处于其他容器的范围内,如果是,在该容器下加入新节点,原容器删除原节点。
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>拖拽</title>
 <style>
 .container ul{
 width: 350px;
 padding: 15px;
 min-height:300px;
 background-color:#FFFFF0;
 margin:20px;
 display: inline-block;
 border-radius: 5px;
 border: 1px solid #bbb;
 }
 .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:#EED2EE;
 margin-bottom:10px;
 -moz-user-select: none;
 user-select: none;
 text-indent: 10px;
 color: #555;
}
</style>
</head>
<body>


 <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>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<!-- <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> -->
<script type="text/javascript">

 $(function(){
 //出入允许拖拽节点的父容器,一般是ul外层的容器
 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>

</body>
</html>

项目demo 请点击这里。

总结

以上就是这篇文章的全部内容了,本文还有许多不足,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 #jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 #jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 #jQuery
jquery实现图片跟随鼠标的实例
Oct 17 #jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 #jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 #jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 #jQuery
You might like
php使用curl存储cookie的示例
2014/03/31 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
PHP之header函数详解
2021/03/02 PHP
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
python生成密码字典的方法
2018/07/06 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
Python类的动态绑定实现原理
2020/03/21 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
理工科学生的自我评价
2013/12/15 职场文书
前处理班长职位说明书
2014/03/01 职场文书
会计毕业生自荐书
2014/06/12 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
感恩主题班会教案
2015/08/12 职场文书