Shulou(Shulou.com)06/01 Report--

今天小编给大家分享一下怎么利用jQuery实现简单的拖曳效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

提出问题

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

实现思路

此操作包含的事件有 mousedown mousemove mouseup ,对这三个事件进行监听并进行相应的操作。

操作设计的节点有：原节点，临时节点，新节点

节点的移动涉及事件e的坐标

操作元素使用JQUERY

代码实现

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

先定义一个对象 drag，包含拖曳需要用到的参数

定义初始化 init 函数，监听各种鼠标事件

mousedown 事件：克隆一个临时节点。记录鼠标点击位置与节点的位置的X,Y差值，设置克隆副本的样式并在原容器中添加这个副本

mousemove 事件：判断鼠标的相对位移，设置副本绝对位置的XY,并对鼠标移出浏览器的情况进行处理;对三个UL进行遍历，在不是原容器的情况下，判断鼠标位置是否处于其他容器的范围内，如果是，修改鼠标当前容器的样式。

mouseup 时间：移除临时节点。对三个UL进行遍历，在不是原容器的情况下，判断鼠标位置是否处于其他容器的范围内，如果是，在该容器下加入新节点，原容器删除原节点。

拖拽 .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;} A B C e f g $(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. Modify the coordinates of the clone node $(drag.tmp_elm).css({ 'left': x, ' top': y, }); //Determine whether the current container allows nodes $.each($('. ' + drag.class_name + ' ul'), function (index, value){ //Get the container's coordinate range (area) var box_x = $(value).offset().left; //container's upper left corner x coordinate var box_y = $(value).offset().top; //container's upper left corner y coordinate var box_width = $(value).outerWidth(); //container's width var box_height = $(value).outerHeight();//Container Height//Add background color to containers that can be placed 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){ //Judge whether it is not under the original container (use coordinates to judge: if any coordinate of x and y is not equal to the original coordinate, it means it is not the original container) if($(value).offset().left !== drag.old_elm.parent().offset().left || $(value).offset().top !== drag.old_elm.parent().offset().top){ //Add nodes to the target container and delete the original nodes tmp = $(drag.old_elm).clone(); var newObj = $(value).append(tmp); $(drag.old_elm).remove(); //Get object of newly added node drag.new_elm = $(newObj).find(tmp); } } //Restore container original background color $(value).css ('background-color','#FFFFF0'); }); }, }; The above is "How to use jQuery to achieve simple drag effect" All the contents of this article, thank you for reading! I believe everyone has a great harvest after reading this article. Xiaobian will update different knowledge for everyone every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.