前端拖拽排序插件的实现——讲一个六耳猕猴和孙悟空的故事

插件的整体功能参考的是支付宝的付款顺序拖拽

发文章之前还未对该插件进行封装及美化，但具体的功能已经实现，有需要源码的留邮箱

先说说一个拖拽功能的实现思路

其实类似于六耳猕猴和孙悟空的关系

一只是真猴子，另一只也是真猴子，不能说六耳猕猴是个假猴子，他确实在西游记的某几集里出现一下，代替了一下孙悟空，只目的不纯，而且有点假，把这个例子类比到拖拽，跟下图差不多

事实上，九九八十一难，还是孙悟空来经历，至于顺序，则是可以随意排序的（你说了算）

当你把其中一只孙悟空拖起来的时候，就在唐僧身边安插一只六耳猕猴，从图中可以看到，孙悟空被拖起来腾云驾雾去了，六耳猕猴很假的呆在孙悟空该呆的位置。这是第一个关键点，在真猴王起飞的一瞬间，就要安插一只假猴子来取经（代码只看个思路，具体代码不全）

//第一步，记录是否第一个或者最后一个节点，在原先节点的位置是补一个假的节点var prevNode = $(this).prev();var nextNode = $(this).next();if(prevNode.length==0){nextNode.before("<li class='animLi'>六耳猕猴</li>");}else{prevNode.after("<li class='animLi'>六耳猕猴</li>");}//把当前css改成fixed，不用absolute防止relative问题$(this).css({"position":"fixed","left":nodeLeft,"top":nodeTop,"opacity":0.5});

第二个关键点，孙悟空想去哪儿，六耳猕猴就得跟到哪儿（纯属虚构），但是，孙悟空也不能xjb飞，他得有个界限，不能超过了这九九八十一难去飞，所以写的时候要注意两个边界。（具体代码不是很好懂，大概注释一下，过程和思路比较重要）

 //第二步，绑定mousemove事件，并判断鼠标移动是否超过Li.height$(this).on("mousemove",function(ev){ifPassHalf(ev,mouseTop,$(this),nodeTop,$("ul").scrollTop())});

function ifPassHalf(ev,mouseTop,node,nodeTop,scrollTop){node.css("top",nodeTop+ev.pageY - mouseTop);var newscrollTop = scrollTop;var zNodeTop = node.offset().top;var jNodeTop = $(".animLi").offset().top;var ifPassHalf = zNodeTop - jNodeTop;//第1层判断，判断鼠标是否超出ul框，不让节点移出ul的上边界和下边界if(parseInt(node.offset().top) <= parseInt(node.parent().offset().top)){node.css("top",node.parent().offset().top+30);//该事件在节点碰到顶部边界的时候触发,把滚动条移动加进去$(".animLi").prev().before($(".animLi"));newscrollTop = scrollTop - parseInt(node.height());}else if((node.offset().top-node.parent().height()+parseInt(node.height())) >= parseInt(node.parent().offset().top)){node.css("top",parseInt(node.parent().offset().top)+parseInt(node.parent().height())-node.height()-30);//该事件在节点碰到底部边界的时候触发,把滚动条移动加进去$(".animLi").next().after($(".animLi"));newscrollTop = scrollTop + parseInt(node.height());}else{//假节点跟着真节点飞的代码if(ifPassHalf>51){$(".animLi").next().after($(".animLi"));}else if(ifPassHalf<-51){$(".animLi").prev().before($(".animLi"));}}
//考虑滚动条node.parent().scrollTop(newscrollTop);
}

第三个关键点，就是孙悟空想下来了，六耳猕猴就得走开，就得消失。

function putNodeDown(ev){$(".animLi").hide();$(".animLi").after($(this));$(this).removeAttr("style");//把mousemove mouseout事件解绑了$(this).off("mousemove");$("li").off("mouseout");//把六耳猕猴让给孙悟空$(".animLi").remove();
}

插播一个bug的解决方案，就是鼠标拖动过快，或者超过边界的时候，应当有个mouseout事件去做一些处理，代码如下

  //修复鼠标移动过快移出div的bug$("li").on("mouseout",function(){$(".animLi").hide();$(".animLi").after($(this));$(this).removeAttr("style");$(this).off("mousemove");$(".animLi").remove();$("li").off("mouseout");alert("请规范操作，鼠标不要超出拖拽区域");});
}

整体的过程如下

鼠标点下（孙悟空起飞，六耳猕猴插队）-->鼠标移动（猴子乱飞，六耳猕猴跟着去各个位置报道）-->鼠标弹起（猴子归位，六耳猕猴走开）

就是那么简单(走了好多弯路的我表示，简单个jer）

需要源码的留邮箱，代码托管在码云，并不想提交，因为还没写完

还是补一篇源码，拿去直接用，反正也不长。

<!DOCTYPE html>
<html>
<head><meta charset=utf-8><title>拖动测试</title><style>ul{list-style-type: none; width: 600px;height: 800px;box-sizing: border-box;border:1px solid black;overflow-y: scroll;overflow-x: hidden;padding: 0;margin: auto;position: relative;margin-top:20px;}li{list-style:none; height: 100px;width:  600px;background-color: green;box-sizing: border-box;border-bottom: 1px solid blue; float: left;cursor: move;}.animLi{  background-color: white;height: 100px;}@keyframes anmi{from {height:20px}to {height:100px}}</style>
</head>
<body>
<ul><li index=1>孙悟空</li>  <li index=2>孙悟空</li>  <li index=3>孙悟空</li>  <li index=4>孙悟空</li>  <li index=5>孙悟空</li>  <li index=6>孙悟空</li>  <li index=1>孙悟空</li>  <li index=2>孙悟空</li>  <li index=3>孙悟空</li>  <li index=4>孙悟空</li>  <li index=5>孙悟空</li>  <li index=6>孙悟空</li>  <li index=1>孙悟空</li>  <li index=2>孙悟空</li>  <li index=3>孙悟空</li>  <li index=4>孙悟空</li>  <li index=5>孙悟空</li>  <li index=6>孙悟空</li>  <li index=1>孙悟空</li>  <li index=2>孙悟空</li>  <li index=3>孙悟空</li>  <li index=4>孙悟空</li>  <li index=5>孙悟空</li>  <li index=6>孙悟空</li>  <li index=1>孙悟空</li>  <li index=2>孙悟空</li>  <li index=3>孙悟空</li>  <li index=4>孙悟空</li>  <li index=5>孙悟空</li>  <li index=6>孙悟空</li>
</ul>
<script src="js/jquery-1.11.1.js"></script>
<script>
//去掉鼠标选中文字的事件
if(document.all){document.onselectstart= function(){return false;}; //for ie
}else{document.onmousedown= function(){return false;};document.onmouseup= function(){return true;};
}
document.onselectstart = new Function('event.returnValue=false;');$("li").on("mousedown",drag);function drag(ev){//鼠标距离顶部的高度，用于计算移动后的高度差var mouseTop = ev.pageY;//节点距离顶部的高度和宽度,用于绝对定位var nodeTop = $(this).offset().top;var nodeLeft = $(this).offset().left;//第一步，记录是否第一个或者最后一个节点var prevNode = $(this).prev();var nextNode = $(this).next();if(prevNode.length==0){nextNode.before("<li class='animLi'>六耳猕猴</li>");}else{prevNode.after("<li class='animLi'>六耳猕猴</li>");}//把当前css改成fixed，不用absolute防止relative问题$(this).css({"position":"fixed","left":nodeLeft,"top":nodeTop,"opacity":0.5});//在节点原先呆的位置上补一个假的//第二步，绑定mousemove事件，判断鼠标移动是否超过Li.height$(this).on("mousemove",function(ev){ifPassHalf(ev,mouseTop,$(this),nodeTop,$("ul").scrollTop())});//第三步，解绑mousemove事件，绑定mouseup事件$(this).on("mouseup",putNodeDown);//修复鼠标移动过快移出div的bug$("li").on("mouseout",function(){$(".animLi").hide();$(".animLi").after($(this));$(this).removeAttr("style");$(this).off("mousemove");$(".animLi").remove();$("li").off("mouseout");alert("请规范操作，鼠标不要超出拖拽区域");});
}function ifPassHalf(ev,mouseTop,node,nodeTop,scrollTop){node.css("top",nodeTop+ev.pageY - mouseTop);var newscrollTop = scrollTop;var zNodeTop = node.offset().top;var jNodeTop = $(".animLi").offset().top;var ifPassHalf = zNodeTop - jNodeTop;//第1层判断，判断鼠标是否超出ul框，不让节点移出ul的上边界和下边界if(parseInt(node.offset().top) <= parseInt(node.parent().offset().top)){node.css("top",node.parent().offset().top+30);//该事件在节点碰到顶部边界的时候触发,把滚动条移动加进去$(".animLi").prev().before($(".animLi"));newscrollTop = scrollTop - parseInt(node.height());}else if((node.offset().top-node.parent().height()+parseInt(node.height())) >= parseInt(node.parent().offset().top)){node.css("top",parseInt(node.parent().offset().top)+parseInt(node.parent().height())-node.height()-30);//该事件在节点碰到底部边界的时候触发,把滚动条移动加进去$(".animLi").next().after($(".animLi"));newscrollTop = scrollTop + parseInt(node.height());}else{if(ifPassHalf>51){$(".animLi").next().after($(".animLi"));}else if(ifPassHalf<-51){$(".animLi").prev().before($(".animLi"));}}node.parent().scrollTop(newscrollTop);
}function putNodeDown(ev){$(".animLi").hide();$(".animLi").after($(this));$(this).removeAttr("style");//把mousemove mouseout事件解绑了$(this).off("mousemove");$("li").off("mouseout");//把六耳猕猴让给孙悟空$(".animLi").remove();
}
</script>
</body>
</html>

前端拖拽排序插件的实现——讲一个六耳猕猴和孙悟空的故事相关推荐

html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...
html5+vue无法拖拽,Vue拖拽排序插件Vuedraggable使用方法详解_心善_前端开发者
大家好,最近做的项目要用到拖拽排序,我现在的项目是首先在 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import ...
html列表拖拽排序插件,可对列表自由拖拽排序的jQuery插件
dragslot.js是一款可以对列表自由拖拽排序的jQuery插件.该插件主要的功能是实现了列表项可以在各个列表中相互拖拽. 对于像todo list, 分配任务列表都可以应用这个效果. 使用方法 ...
html列表拖拽排序插件,js拖拽排序插件Sortable
插件描述:功能强大的Javript拖拽排序库Sortable,拖拽兼容性好,零依赖更新时间:2020-05-15 18:19:16 SortableJS 功能强大的JavaScript 拖拽库特性 ...
拖拽排序插件sortable
简介 Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 下载地址:https://github.com/RubaXa/Sortable 官方DEMO:https ...
jquery的sortable拖拽排序插件，顺序没发生改变则不请求
一.前言前几天刚做完排序,本来以为没什么问题的,结果今天被告知要优化一下..功能上是没问题,但是有一些小细节需要优化.比如我做的是每次拖拽完成之后,都在stop方法里面请求ajax保存顺序.但是要考 ...
拖拽排序插件Sortable.js在拖动的时候不能滑动鼠标滚轮滚动屏幕的问题
只是一个小问题在使用sortable.js的时候遇到拖动的时候不能滑动鼠标滚轮控制滚动条,找了很多地方,也看了文档,原来是没有找到那个点: forceFallback: false, // igno ...
vue项目中，兼容vue3.0 1.0 2.0 宫格拖拽排序，特殊五小一大六宫格拖拽
前端时间写了标准宫格拖拽排序的文章 1. 2.4.9.12等等标准宫格拖拽,基于vue-grid-layout 拖拽换位无刷新 vue项目中基于vue-grid-layout开发的拖拽 ...
vue中实现拖拽排序
原生拖拽 API 实现拖拽设置元素 dragable 将元素的 dragable 属性设置为 true (文本图片链接的draggable 属性默认为 true)则元素可拖放 <div ...

前端拖拽排序插件的实现——讲一个六耳猕猴和孙悟空的故事

前端拖拽排序插件的实现——讲一个六耳猕猴和孙悟空的故事相关推荐

最新文章

热门文章