jquery拖拽排序简单实现方法(效果增强版)_jquery

本文实例讲述了jquery拖拽排序简单实现方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

原来没有新建动作，分析代码后发现很容易增强~~

代码如下：

").insertBefore(theDiv); }); }); } loopbox(); $(".drag_module_box").mousemove(function(event) { console.log( 'mousemove' ); if (!move) return false; lastPos.x = event.pageX - range.x; lastPos.y = event.pageY - range.y; lastPos.y1 = lastPos.y + theDivHeight; // 拖拽元素随鼠标移动 theDiv.css({left: lastPos.x + 'px',top: lastPos.y + 'px'}); // 拖拽元素随鼠标移动 查找插入目标元素 var $main = $('.drag_module_main'); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标， tempDiv = $(".drag_module_dash"); //获得临时 虚线框的对象 $main.each(function () { tarDiv = $(this); tarPos.x = tarDiv.offset().left; tarPos.y = tarDiv.offset().top; tarPos.y1 = tarPos.y + tarDiv.height()/2; tarFirst = $main.eq(0); // 获得第一个元素 tarFirstY = tarFirst.offset().top + theDivHalf ; // 第一个元素对象的中心纵坐标 //拖拽对象 移动到第一个位置 if (lastPos.y = tarPos.y - theDivHalf && lastPos.y1 >= tarPos.y1 ) { tempDiv.insertAfter(tarDiv); } }); }).mouseup(function(event) { console.log( 'mouseup' ); if(theDiv==null) return false; theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上 theDiv.attr("class", "drag_module_main"); //恢复对象的初始样式 $('.drag_module_dash').remove(); // 删除新建的虚线div move=false; }); $("#drag_module_insert").click(function(){ $("#drag_module_box1").html($("#drag_module_box1").html()+$("#drag_module_box2").html()); loopbox(); }); $("#drag_module_seque").click(function(){ $(".drag_module_box").find(".drag_module_main").each(function(){ console.log($(this).attr('id')); }); }); });

div1

div2

div3

div4

div5

div6

div7