java 鼠标拖动图形_[Java教程]基于js鼠标拖动图片排序

[Java教程]基于js鼠标拖动图片排序

0 2015-02-14 16:00:42

分享一款基于js的图片排序效果。鼠标拖动图片，重新排列图片的排列顺序。该插件适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

• 
• 
• 
• 
• 
• 

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 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://www.w2bc.com/Article/23686

本文网址：http://www.shaoqun.com/a/110849.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

JS

0