利用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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
详解jquery和vue对比
Apr 16 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
php调用shell的方法
2014/11/05 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
jQuery 入门讲解1
2009/04/15 Javascript
javascript 自定义事件初探
2009/08/21 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
axios学习教程全攻略
2017/03/26 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
意大利单身交友网站:Meetic
2020/07/12 全球购物
机械专业毕业生自荐信
2013/11/02 职场文书
思想品德自我评价
2014/02/04 职场文书
产品推广策划方案
2014/05/10 职场文书
综艺节目策划方案
2014/06/13 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
财务稽核岗位职责
2015/04/13 职场文书
2016年少先队活动总结
2016/04/06 职场文书
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript