代码的一部分参照了google的算法,对于勾股定理的一个应用让人感觉眼前一亮,仔细分析感觉确实是高,运用得很巧妙。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>google drag</title> <mce:style type="text/css"><!-- *{ margin:0;padding:0; } body{ } .d-con{ width:33%;float:left;vertical-align:top;height:auto;min-height:600px; } .modbox{ margin:0 0 15px 20px;border:1px solid #C8E4B3;height:200px;z-index:9;-moz-user-select:none; } .modtitle{ width:100%;background:#C8E4B3;height:25px; } --></mce:style><style type="text/css" mce_bogus="1">*{ margin:0;padding:0; } body{ } .d-con{ width:33%;float:left;vertical-align:top;height:auto;min-height:600px; } .modbox{ margin:0 0 15px 20px;border:1px solid #C8E4B3;height:200px;z-index:9;-moz-user-select:none; } .modtitle{ width:100%;background:#C8E4B3;height:25px; }</style> </head> <body> <div id="d-1" class="d-con"> <div class="modbox" > <div class="modtitle">1</div> </div> <div class="modbox" > <div class="modtitle">2</div> </div> <div class="modbox" > <div class="modtitle">3</div> </div> </div> <div id="d-2" class="d-con"> <div class="modbox"> <div class="modtitle">4</div> </div> <div class="modbox"> <div class="modtitle">5</div> </div> <div class="modbox"> <div class="modtitle">6</div> </div> </div> <div id="d-3" class="d-con"> <div class="modbox"> <div class="modtitle">7</div> </div> <div class="modbox"> <div class="modtitle">8</div> </div> <div class="modbox"> <div class="modtitle">9</div> </div> </div> </body> </html> <mce:script type="text/javascript"><!-- function getNext(ele){ if(!ele.nextSibling){ return null; }else{ return ele.nextSibling.nodeType != 1 ? getNext(ele.nextSibling) : ele.nextSibling; } } function pageX(ele){ return ele.offsetParent ? ele.offsetLeft + pageX(ele.offsetParent):ele.offsetLeft; } function pageY(ele){ return ele.offsetParent ? ele.offsetTop + pageY(ele.offsetParent) : ele.offsetTop; } function getElementsByClassName(oElem, strTagName, strClassName){ var arrElements = (strTagName == '*' && oElem.all) ? oElem.all : oElem.getElementsByTagName(strTagName) ; var returnArrElements = new Array(); var oRegExp = new RegExp('(^|//s)' + strClassName + '($|//s)'); for(var i=0; i<arrElements.length; i++){ if (oRegExp.test(arrElements[i].className)){ returnArrElements.push(arrElements[i]); } } return (returnArrElements); } var drag_globals = { dx : 0, dy : 0, current : null } if(window.attachEvent){ window.attachEvent('onload',initDragDrop); }else{ window.addEventListener('load',initDragDrop,false); } function initDragDrop(){ var drags = getElementsByClassName(document.body,'div','modtitle'); for(var i=0,l=drags.length;i<l;i++){ (function(){ var drag = drags[i]; drag.onmousedown = function(e){ drag_globals.current = this.parentNode; currentParent = this.parentNode.parentNode; //当前父容器 currentWidth = drag_globals.current.offsetWidth; //当前拖动对象宽度 var ev = window.event || e; var left = ev.pageX ? ev.pageX : ev.clientX; var top = ev.pageY ? ev.pageY : ev.clientY; drag_globals.dx = left - (pageX(drag_globals.current) || 0); //鼠标到拖动对象左边缘距离 drag_globals.dy = top - (pageY(drag_globals.current) || 0); //鼠标到拖动对象上边缘距离 drag_globals.current.style.position = 'absolute'; drag_globals.current.style.zIndex = 9999; drag_globals.current.style.width = (currentWidth-2) + 'px'; drag_globals.current.style.left = (left - drag_globals.dx) + 'px'; //鼠标点击显示向左偏移的效果 drag_globals.current.style.top = (top - drag_globals.dy) + 'px'; drag_globals.current.style.cursor = 'move'; var temp = document.createElement('div'); //ghost元素,站位效果 temp.className = 'modbox'; temp.id = 'temp'; temp.style.width = currentWidth + 'px'; temp.style.border = '2px dashed #ececec'; currentParent.insertBefore(temp, drag_globals.current); } document.onmousemove = function(e){ if(drag_globals.current){ var ev = window.event || e; var left = ev.pageX ? ev.pageX : ev.clientX; var top = ev.pageY ? ev.pageY : ev.clientY; drag_globals.current.style.opacity = 0.6; drag_globals.current.style.filter = 'alpha(opacity=60)'; drag_globals.current.style.left = (left - drag_globals.dx) + 'px'; drag_globals.current.style.top = (top - drag_globals.dy) + 'px'; drag_globals.current.style.cursor = 'move'; var dragables = getElementsByClassName(document.body,'div','modbox'); var max_distance = 10000; var elem = null //离鼠标最近的可拖动元素,ghost元素吸附的位置 for(var i=0,l=dragables.length;i<l;i++){ //利用勾股定理算出离光标位置最近的可拖动元素 var item = dragables[i]; var distance = Math.sqrt(Math.pow(left - pageX(item),2) + Math.pow(top - pageY(item),2)); if(item == drag_globals.current){ continue; } if(isNaN(distance)){ continue; } if(distance < max_distance){ max_distance = distance; elem = item; } } var temp = document.getElementById('temp'); if(left < 1/3 * document.body.clientWidth){ var con = document.getElementById('d-1'); if(getElementsByClassName(con,'div','modbox').length == 0){ //如果容器里没有可拖拽元素 con.appendChild(temp); return; } }else if(left > 1/3 * document.body.clientWidth && left < 2/3 * document.body.clientWidth){ var con = document.getElementById('d-2'); if(getElementsByClassName(con,'div','modbox').length == 0){ //如果容器里没有可拖拽元素 con.appendChild(temp); return; } }else if(left > 2/3 * document.body.clientWidth){ var con = document.getElementById('d-3'); if(getElementsByClassName(con,'div','modbox').length == 0){ //如果容器里没有可拖拽元素 con.appendChild(temp); return; } } if(temp){ if(!getNext(elem)){ //如果是大容器中最后一个 elem.parentNode.appendChild(temp); }else{ elem.parentNode.insertBefore(temp, elem); } } } } document.onmouseup = function(e){ if(drag_globals.current){ var ev = window.event || e; var left = ev.pageX ? ev.pageX : ev.clientX; var top = ev.pageY ? ev.pageY : ev.clientY; drag_globals.current.style.position = 'static'; drag_globals.current.style.left = 0; drag_globals.current.style.top = 0; drag_globals.current.style.opacity = 1; drag_globals.current.style.filter = 'alpha(opacity=100)'; drag_globals.current.style.cursor = 'default'; drag_globals.current.style.zIndex = 9; if(document.getElementById('temp')){ var temp = document.getElementById('temp'); temp.parentNode.insertBefore(drag_globals.current,temp); temp.parentNode.removeChild(temp); } drag_globals.dx = 0; drag_globals.dy = 0; drag_globals.current = null; } } })(); } } // --></mce:script>