利用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 相关文章推荐
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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 验证码的实现代码
2011/07/17 PHP
php日历制作代码分享
2014/01/20 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
如何用Python 加密文件
2020/09/10 Python
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
学生会主席就职演讲稿
2014/01/14 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
会议开幕词
2015/01/28 职场文书
文化大革命观后感
2015/06/17 职场文书
MySQL 服务和数据库管理
2021/11/11 MySQL