程序员人生网站导航

JavaScript实现拖拽并替换网页块元素

栏目：jscript时间：2014-01-07 18:52:04

　　效果：实现类似于学生换座位的效果，将网页内的两个元素通过拖拽的方式互换。找了一些现成的插件，发现都不太符合我的需求，于是参考网上的例子自己实现了一个，还没有优化。

　　参考：怎么用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.wfuyu.com/' title="liehuo.net" target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

------分隔线----------------------------

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

下一篇 陈建权：用户体验和网站利益之间的取舍

------分隔线----------------------------