圆月山庄资源网 Design By www.vgjia.com
效果图:
直接上代码
<script> 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]); //交换index oNear.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]; } } } </script> <ul id="ul1"> <li><img src="/UploadFiles/2021-04-02/500x500-1.png">* { 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; }//通过class获取元素 function getClass(cls) { var ret = []; var els = document.getElementsByTagName("*"); for (var i = 0; i < els.length; i++) { //判断els[i]中是否存在cls这个className;.indexOf("cls")判断cls存在的下标,如果下标>=0则存在; if (els[i].className === cls || els[i].className.indexOf("cls") >= 0 || els[i].className.indexOf(" cls") >= 0 || els[i].className.indexOf(" cls ") > 0) { ret.push(els[i]); } } return ret; } function getStyle(obj, attr) { //解决JS兼容问题获取正确的属性值 return obj.currentStyle "opacity") { iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100); } else { iCur = parseInt(getStyle(obj, attr)); } var ispeed = (json[attr] - iCur) / 8; //运动速度如果大于0则向下取整,如果小于0想上取整; ispeed = ispeed > 0 "opacity") { obj.style.filter = "alpha:(opacity:" + (json[attr] + ispeed) + ")"; obj.style.opacity = (json[attr] + ispeed) / 100; } else { obj.style[attr] = iCur + ispeed + "px"; } } //判断是否全部完成 if (isStop) { clearInterval(obj.timer); if (fun) { fun(); } } }, 30); }总结
标签:
js图片拖拽排序
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]