javascript實現拖拽并替換網頁塊元素

2019-11-21 00:58:47

字體：大中小

來源：轉載

供稿：網友

找了一些現成的插件，發現都不太符合我的需求，于是參考網上的例子自己實現了一個，還沒有優化。

還是貼代碼吧：
dragtoreplace

<!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> <title>DragToReplaceDeom</title> <style> #displayRoom{background:#eee;position:relative;float:left;clear:both;padding:30px 0px 0px 20px;margin-left:20px;margin-top:10px;} .row{display:inline-block;float:left;width:90px;clear:none;top:0;/**//*background:#DFEFFC;*/} .row span{display:inline-block;width:60px;clear:none;background:#9192B1;height:30px;line-height:30px;margin-bottom:30px;text-align:center;} span.usr{cursor:pointer;position:absolute;display:inline-block;width:60px;clear:none;height:30px;line-height:30px;margin-bottom:30px;text-align:center;background:#4DA74D;color:#fff;} span.usr.catch{background:#BD9B33!important;} </style> </head> <body> <div   class="iwvjtn8m0"   id="displayRoom"> <div   id="iwvjtn8m0"   class="row"> <span><span id="iwvjtn8m0"    class="usr" id="345">學生甲</span></span><span></span><span></span><span></span></div> <div   id="iwvjtn8m0"   class="row"> <span><span id="iwvjtn8m0"    class="usr" id="123">學生乙</span></span><span id="3"></span><span></span><span></span></div> <div   id="iwvjtn8m0"   class="row"> <span></span><span></span><span></span><span></span> </div> <div   id="iwvjtn8m0"   class="row"> <span></span><span><span id="iwvjtn8m0"    class="usr" id="456">學生一</span></span><span></span><span></span> </div> </div> <script type="text/javascript">var curTarget = null; //鼠標拖拽的目標元素 var curPos = null; var dropTarget = null; //要放下的目標元素 var iMouseDown = false; //鼠標是否按下 var lMouseState = false; //前一個iMouseDown狀態 var dragreplaceCont = []; var mouseOffset = null; var callbackFunc = null; Number.prototype.NaN0 = function() { return isNaN(this) ? 0 : this; } function setdragreplace(obj, callback) { dragreplaceCont.push(obj); obj.setAttribute('candrag', '1'); if (callback != null && typeof (callback) == 'function') { callbackFunc = callback; } } //鼠標移動 function mouseMove(ev) { ev = ev || window.event; var target = ev.target || ev.srcElement; var mousePos = mouseCoords(ev); //如果當前元素可拖拽 var dragObj = target.getAttribute('candrag'); if (dragObj != null) { if (iMouseDown && !lMouseState) { //剛開始拖拽 curTarget = target; curPos = getPosition(target); mouseOffset = getMouseOffset(target, ev); // 清空輔助層 for (var i = 0; i < dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes[i]); //克隆元素到輔助層，并移動到鼠標位置 dragHelper.appendChild(curTarget.cloneNode(true)); dragHelper.style.display = 'block'; dragHelper.firstChild.removeAttribute('candrag'); //記錄拖拽元素的位置信息 curTarget.setAttribute('startWidth', parseInt(curTarget.offsetWidth)); curTarget.setAttribute('startHeight', parseInt(curTarget.offsetHeight)); curTarget.style.display = 'none'; //記錄每個可接納元素的位置信息，這里一次記錄以后多次調用，獲取更高性能 for (var i = 0; i < dragreplaceCont.length; i++) { with (dragreplaceCont[i]) { if (dragreplaceCont[i] == curTarget) continue; var pos = getPosition(dragreplaceCont[i]); setAttribute('startWidth', parseInt(offsetWidth)); setAttribute('startHeight', parseInt(offsetHeight)); setAttribute('startLeft', pos.x); setAttribute('startTop', pos.y); } } //記錄end } //剛開始拖拽end } //正在拖拽 if (curTarget != null) { // move our helper div to wherever the mouse is (adjusted by mouseOffset) dragHelper.style.top = mousePos.y - mouseOffset.y + "px"; dragHelper.style.left = mousePos.x - mouseOffset.x + "px"; //拖拽元素的中點 var xPos = mousePos.x - mouseOffset.x + (parseInt(curTarget.getAttribute('startWidth')) / 2); var yPos = mousePos.y - mouseOffset.y + (parseInt(curTarget.getAttribute('startHeight')) / 2); var havedrop = false; for (var i = 0; i < dragreplaceCont.length; i++) { with (dragreplaceCont[i]) { if (dragreplaceCont[i] == curTarget) continue; if ((parseInt(getAttribute('startLeft')) < xPos) && (parseInt(getAttribute('startTop')) < yPos) && ((parseInt(getAttribute('startLeft')) + parseInt(getAttribute('startWidth'))) > xPos) && ((parseInt(getAttribute('startTop')) + parseInt(getAttribute('startHeight'))) > yPos)) { havedrop = true; dropTarget = dragreplaceCont[i]; dropTarget.className = 'usr catch'; break; } } } if (!havedrop && dropTarget != null) { dropTarget.className = 'usr'; dropTarget = null; } } //正在拖拽end lMouseState = iMouseDown; if (curTarget) return false; //阻止其它響應（如：鼠標框選文本） } //鼠標松開 function mouseUp(ev) { if (curTarget) { dragHelper.style.display = 'none'; //隱藏輔助層 if (curTarget.style.display == 'none' && dropTarget != null) { //有元素接納，兩者互換 var destP = dropTarget.parentNode; var sourceP = curTarget.parentNode; destP.appendChild(curTarget); sourceP.appendChild(dropTarget); dropTarget.className = 'usr'; dropTarget = null; if (callbackFunc != null) { callbackFunc(curTarget); } } curTarget.style.display = ''; curTarget.style.visibility = 'visible'; curTarget.setAttribute('candrag', '1'); } curTarget = null; iMouseDown = false; } //鼠標按下 function mouseDown(ev) { //記錄變量狀態 iMouseDown = true; //獲取事件屬性 ev = ev || window.event; var target = ev.target || ev.srcElement; if (target.onmousedown || target.getAttribute('candrag')) {//阻止其它響應（如：鼠標雙擊文本） return false; } } //返回當前item相對頁面左上角的坐標 function getPosition(e) { var left = 0; var top = 0; while (e.offsetParent) { left += e.offsetLeft + (e.currentStyle ? (parseInt(e.currentStyle.borderLeftWidth)).NaN0() : 0); top += e.offsetTop + (e.currentStyle ? (parseInt(e.currentStyle.borderTopWidth)).NaN0() : 0); e = e.offsetParent; } left += e.offsetLeft + (e.currentStyle ? (parseInt(e.currentStyle.borderLeftWidth)).NaN0() : 0); top += e.offsetTop + (e.currentStyle ? (parseInt(e.currentStyle.borderTopWidth)).NaN0() : 0); return { x: left, y: top }; } //返回鼠標相對頁面左上角的坐標 function mouseCoords(ev) { if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop }; } //鼠標位置相對于item的偏移量 function getMouseOffset(target, ev) { ev = ev || window.event; var docPos = getPosition(target); var mousePos = mouseCoords(ev); return { x: mousePos.x - docPos.x, y: mousePos.y - docPos.y }; } window.onload = function() { document.onmousemove = mouseMove; document.onmousedown = mouseDown; document.onmouseup = mouseUp; //輔助層用來顯示拖拽 dragHelper = document.createElement('DIV'); dragHelper.style.cssText = 'position:absolute;display:none;'; document.body.appendChild(dragHelper); setdragreplace(document.getElementById('345')); setdragreplace(document.getElementById('123')); setdragreplace(document.getElementById('456')); }; </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：javascript 設置文本框中焦點的位置

下一篇：ExtJS Grid使用SimpleStore、多選框的方法