您當前位置：首頁 > web前端 > jscript > JavaScript實現拖拽并替換網頁塊元素

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

來源：程序員人生發布時間：2014-01-07 18:52:04 閱讀次數：2726次

　　效果：實現類似于學生換座位的效果，將網頁內的兩個元素通過拖拽的方式互換。找了一些現成的插件，發現都不太符合我的需求，于是參考網上的例子自己實現了一個，還沒有優化。

　　參考：怎么用javascript進行拖拽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22><html xmlns="http://www.w3.org/1999/xhtml%22><head><title>DragToReplaceDeom - liehuo.net</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 id="displayRoom"><div class="row"><span><span class="usr" id="345">學生甲</span></span><span></span><span></span><span></span></div><div class="row"><span><span class="usr" id="123">學生乙</span></span><span id="3"></span><span></span><span></span></div><div class="row"><span></span><span></span><span></span><span></span></div><div class="row"><span></span><span><span 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>s<br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.vxbq.cn/' title="liehuo.net" target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 DWR是什么？有什么作用？如何使用？

下一篇 陳建權：用戶體驗和網站利益之間的取舍

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

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