通过拖动实现调整元素之间位置代码实例
分类:实例代码
分享一段代码实例,它实现了通过拖动来调整元素之间位置的功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { margin: 0; padding: 0; list-style: none; } #ul1 { position: relative; width: 688px; margin: 30px auto; } #ul1 li { float: left; width: 50px; height: 50px; line-height: 150px; text-align: center; font-size: 30px; border: 1px solid #000; background: #ccc; margin: 60px; } </style> <script> function move(obj, json, optional) { optional = optional || {}; optional.time = optional.time || 500; optional.type = optional.type || 'ease-out'; optional.fn = optional.fn || null; var start = {}; var dis = {}; for (var key in json) { start[key] = parseFloat(getStyle(obj, key)); dis[key] = json[key] - start[key]; } var count = Math.round(optional.time / 30); var n = 0; clearInterval(obj.timer); obj.timer = setInterval(function() { n++; for (var key in json) { switch (optional.type) { case 'linear': var a = n / count; break; case 'ease-in': var a = n / count; a = a * a * a; break; case 'ease-out': var a = 1 - n / count; var a = 1 - a * a * a; break; } var cur = start[key] + dis[key] * a; if (key == 'opacity') { obj.style.opacity = cur; obj.style.filter = 'alpha(opacity=' + cur * 100 + ')'; } else { obj.style[key] = cur + 'px'; } } if (n == count) { clearInterval(obj.timer); optional.fn && optional.fn(); } }, 30); } function getStyle(obj, name) { return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, false)[name]; } window.onload = function() { var oUl = document.getElementById("ul1"); var aLi = oUl.children; var zIndex = 1; //1 布局转换 var aPos = []; for (var i = 0; i < aLi.length; i++) { aPos[i] = { left: aLi[i].offsetLeft, top: aLi[i].offsetTop }; aLi[i].style.left = aPos[i].left + 'px'; aLi[i].style.top = aPos[i].top + 'px'; } for (var i = 0; i < aLi.length; i++) { aLi[i].style.position = 'absolute' aLi[i].style.margin = 0; drag(aLi[i]) aLi[i].innerHTML = i; aLi[i].index = i; } //拖拽 function drag(obj) { obj.onmousedown = function(e) { obj.style.zIndex = zIndex++; var oEvent = e || event; var disX = oEvent.clientX - obj.offsetLeft; var disY = oEvent.clientY - obj.offsetTop; document.onmousemove = function(e) { var oEvent = e || event; obj.style.left = oEvent.clientX - disX + 'px'; obj.style.top = oEvent.clientY - disY + 'px'; var oNear = findMin(obj); //console.log(oNear) if (oNear && oNear != obj) { n = obj.index // m = oNear.index // if (n < m) { for (var i = 0; i < aLi.length; i++) { if (aLi[i].index >= n + 1 && aLi[i].index <= m) { aLi[i].index--; move(aLi[i], aPos[aLi[i].index]) } } } else { for (var i = 0; i < aLi.length; i++) { if (aLi[i].index >= m && aLi[i].index <= n - 1) { aLi[i].index++; move(aLi[i], aPos[aLi[i].index]) } } } obj.index = m; } // } document.onmouseup = function(e) { document.onmouseup = null; document.onmousemove = null obj.releaseCapture && obj.releaseCapture() move(obj, aPos[obj.index]) } obj.setCapture && obj.setCapture() return false; } } //找最近的距离 function findMin(obj) { var iMin = 9999999; var iMInIndex = -1; for (var i = 0; i < aLi.length; i++) { if (collTest(obj, aLi[i])) { var dis = getDis(obj, aLi[i]) //算距离 if (iMin > dis) { //比较 iMin = dis; iMInIndex = i; } } } return aLi[iMInIndex]; } //算距离 function getDis(obj1, obj2) { var x1 = obj1.offsetLeft + obj1.offsetWidth / 2; var y1 = obj1.offsetTop + obj1.offsetHeight / 2 var x2 = aPos[obj2.index].left + obj2.offsetWidth / 2; var y2 = aPos[obj2.index].top + obj2.offsetHeight / 2 var a = x1 - x2; var b = y1 - y2; return Math.sqrt(a * a + b * b) } //碰撞检测 function collTest(obj1, obj2) { var l1 = obj1.offsetLeft; var t1 = obj1.offsetTop; var r1 = obj1.offsetLeft + obj1.offsetWidth; var b1 = obj1.offsetTop + obj1.offsetHeight; var l2 = aPos[obj2.index].left; var t2 = aPos[obj2.index].top; var r2 = aPos[obj2.index].left + obj2.offsetWidth; var b2 = aPos[obj2.index].top + obj2.offsetHeight; //判断没撞上的时候 if (l1 > r2 || t1 > b2 || r1 < l2 || b1 < t2) { return false } else { return true } } }; </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
通过拖动实现调整元素之间位置代码实例,这样的场景在实际项目中还是用的比较多的,关于通过拖动实现调整元素之间位置代码实例就介绍到这了。
通过拖动实现调整元素之间位置代码实例属于前端实例代码,有关更多实例代码大家可以查看。