分享一款基于js的圖片排序效果。鼠標拖動圖片，重新排列圖片的排列順序。該插件適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果圖如下：

在線預覽???源碼下載

實現的代碼。

html代碼：

<ul id="ul1"><li><img src="images/1.jpg" width="200" height="150" /></li><li><img src="images/2.jpg" width="200" height="150" /></li><li><img src="images/3.jpg" width="200" height="150" /></li><li><img src="images/4.jpg" width="200" height="150" /></li><li><img src="images/5.jpg" width="200" height="150" /></li><li><img src="images/6.jpg" width="200" height="150" /></li></ul>

css代碼：

*{margin: 0;padding: 0;list-style: none;}#ul1{width: 660px;position: relative;margin: 10px auto;}#ul1 li{width: 200px;height: 150px;float: left;list-style: none;margin: 10px;}#ul1 li:hover{border-color: #9a9fa4;box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.85);}#ul1 .active{border: 1px dashed red;}

js代碼：

window.onload = function () {var oUl = document.getElementById("ul1");var aLi = oUl.getElementsByTagName("li");var disX = 0;var disY = 0;var minZindex = 1;var aPos = [];for (var i = 0; i < aLi.length; i++) {var t = aLi[i].offsetTop;var l = aLi[i].offsetLeft;aLi[i].style.top = t + "px";aLi[i].style.left = l + "px";aPos[i] = { left: l, top: t };aLi[i].index = i;}for (var i = 0; i < aLi.length; i++) {aLi[i].style.position = "absolute";aLi[i].style.margin = 0;setDrag(aLi[i]);}//拖拽function setDrag(obj) {obj.onmouseover = function () {obj.style.cursor = "move";}obj.onmousedown = function (event) {var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;obj.style.zIndex = minZindex++;//當鼠標按下時計算鼠標與拖拽對象的距離disX = event.clientX + scrollLeft - obj.offsetLeft;disY = event.clientY + scrollTop - obj.offsetTop;document.onmousemove = function (event) {//當鼠標拖動時計算div的位置var l = event.clientX - disX + scrollLeft;var t = event.clientY - disY + scrollTop;obj.style.left = l + "px";obj.style.top = t + "px";/*for(var i=0;i<aLi.length;i++){aLi[i].className = "";if(obj==aLi[i])continue;//如果是自己則跳過自己不加紅色虛線if(colTest(obj,aLi[i])){aLi[i].className = "active";}}*/for (var i = 0; i < aLi.length; i++) {aLi[i].className = "";}var oNear = findMin(obj);if (oNear) {oNear.className = "active";}}document.onmouseup = function () {document.onmousemove = null; //當鼠標彈起時移出移動事件document.onmouseup = null; //移出up事件，清空內存//檢測是否普碰上，在交換位置var oNear = findMin(obj);if (oNear) {oNear.className = "";oNear.style.zIndex = minZindex++;obj.style.zIndex = minZindex++;startMove(oNear, aPos[obj.index]);startMove(obj, aPos[oNear.index]);//交換indexoNear.index += obj.index;obj.index = oNear.index - obj.index;oNear.index = oNear.index - obj.index;} else {startMove(obj, aPos[obj.index]);}}clearInterval(obj.timer);return false; //低版本出現禁止符號 }}//碰撞檢測function colTest(obj1, obj2) {var t1 = obj1.offsetTop;var r1 = obj1.offsetWidth + obj1.offsetLeft;var b1 = obj1.offsetHeight + obj1.offsetTop;var l1 = obj1.offsetLeft;var t2 = obj2.offsetTop;var r2 = obj2.offsetWidth + obj2.offsetLeft;var b2 = obj2.offsetHeight + obj2.offsetTop;var l2 = obj2.offsetLeft;if (t1 > b2 || r1 < l2 || b1 < t2 || l1 > r2) {return false;} else {return true;}}//勾股定理求距離function getDis(obj1, obj2) {var a = obj1.offsetLeft - obj2.offsetLeft;var b = obj1.offsetTop - obj2.offsetTop;return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));}//找到距離最近的function findMin(obj) {var minDis = 999999999;var minIndex = -1;for (var i = 0; i < aLi.length; i++) {if (obj == aLi[i]) continue;if (colTest(obj, aLi[i])) {var dis = getDis(obj, aLi[i]);if (dis < minDis) {minDis = dis;minIndex = i;}}}if (minIndex == -1) {return null;} else {return aLi[minIndex];}}}

via：http://***/Article/23686

轉載于:https://www.cnblogs.com/liaohuolin/p/4291493.html

總結

以上是生活随笔為你收集整理的基于js鼠标拖动图片排序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。