资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
javascript实现拖拽并替换网页块元素
找了一些现成的插件，发现都不太符合我的需求，于是参考网上的例子自己实现了一个，还没有优化。
还是贴代码吧：
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 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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3Evar%20curTarget%20%3D%20null%3B%20%2F%2F%E9%BC%A0%E6%A0%87%E6%8B%96%E6%8B%BD%E7%9A%84%E7%9B%AE%E6%A0%87%E5%85%83%E7%B4%A0%20%0D%0Avar%20curPos%20%3D%20null%3B%20%0D%0Avar%20dropTarget%20%3D%20null%3B%20%2F%2F%E8%A6%81%E6%94%BE%E4%B8%8B%E7%9A%84%E7%9B%AE%E6%A0%87%E5%85%83%E7%B4%A0%20%0D%0Avar%20iMouseDown%20%3D%20false%3B%20%2F%2F%E9%BC%A0%E6%A0%87%E6%98%AF%E5%90%A6%E6%8C%89%E4%B8%8B%20%0D%0Avar%20lMouseState%20%3D%20false%3B%20%2F%2F%E5%89%8D%E4%B8%80%E4%B8%AAiMouseDown%E7%8A%B6%E6%80%81%20%0D%0Avar%20dragreplaceCont%20%3D%20%5B%5D%3B%20%0D%0Avar%20mouseOffset%20%3D%20null%3B%20%0D%0Avar%20callbackFunc%20%3D%20null%3B%20%0D%0ANumber.prototype.NaN0%20%3D%20function()%20%7B%20return%20isNaN(this)%20%3F%200%20%3A%20this%3B%20%7D%20%0D%0Afunction%20setdragreplace(obj%2C%20callback)%20%7B%20%0D%0AdragreplaceCont.push(obj)%3B%20%0D%0Aobj.setAttribute('candrag'%2C%20'1')%3B%20%0D%0Aif%20(callback%20!%3D%20null%20%26%26%20typeof%20(callback)%20%3D%3D%20'function')%20%7B%20%0D%0AcallbackFunc%20%3D%20callback%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%8A%A8%20%0D%0Afunction%20mouseMove(ev)%20%7B%20%0D%0Aev%20%3D%20ev%20%7C%7C%20window.event%3B%20%0D%0Avar%20target%20%3D%20ev.target%20%7C%7C%20ev.srcElement%3B%20%0D%0Avar%20mousePos%20%3D%20mouseCoords(ev)%3B%20%0D%0A%2F%2F%E5%A6%82%E6%9E%9C%E5%BD%93%E5%89%8D%E5%85%83%E7%B4%A0%E5%8F%AF%E6%8B%96%E6%8B%BD%20%0D%0Avar%20dragObj%20%3D%20target.getAttribute('candrag')%3B%20%0D%0Aif%20(dragObj%20!%3D%20null)%20%7B%20%0D%0Aif%20(iMouseDown%20%26%26%20!lMouseState)%20%7B%20%0D%0A%2F%2F%E5%88%9A%E5%BC%80%E5%A7%8B%E6%8B%96%E6%8B%BD%20%0D%0AcurTarget%20%3D%20target%3B%20%0D%0AcurPos%20%3D%20getPosition(target)%3B%20%0D%0AmouseOffset%20%3D%20getMouseOffset(target%2C%20ev)%3B%20%0D%0A%2F%2F%20%E6%B8%85%E7%A9%BA%E8%BE%85%E5%8A%A9%E5%B1%82%20%0D%0Afor%20(var%20i%20%3D%200%3B%20i%20%3C%20dragHelper.childNodes.length%3B%20i%2B%2B)%20dragHelper.removeChild(dragHelper.childNodes%5Bi%5D)%3B%20%0D%0A%2F%2F%E5%85%8B%E9%9A%86%E5%85%83%E7%B4%A0%E5%88%B0%E8%BE%85%E5%8A%A9%E5%B1%82%EF%BC%8C%E5%B9%B6%E7%A7%BB%E5%8A%A8%E5%88%B0%E9%BC%A0%E6%A0%87%E4%BD%8D%E7%BD%AE%20%0D%0AdragHelper.appendChild(curTarget.cloneNode(true))%3B%20%0D%0AdragHelper.style.display%20%3D%20'block'%3B%20%0D%0AdragHelper.firstChild.removeAttribute('candrag')%3B%20%0D%0A%2F%2F%E8%AE%B0%E5%BD%95%E6%8B%96%E6%8B%BD%E5%85%83%E7%B4%A0%E7%9A%84%E4%BD%8D%E7%BD%AE%E4%BF%A1%E6%81%AF%20%0D%0AcurTarget.setAttribute('startWidth'%2C%20parseInt(curTarget.offsetWidth))%3B%20%0D%0AcurTarget.setAttribute('startHeight'%2C%20parseInt(curTarget.offsetHeight))%3B%20%0D%0AcurTarget.style.display%20%3D%20'none'%3B%20%0D%0A%2F%2F%E8%AE%B0%E5%BD%95%E6%AF%8F%E4%B8%AA%E5%8F%AF%E6%8E%A5%E7%BA%B3%E5%85%83%E7%B4%A0%E7%9A%84%E4%BD%8D%E7%BD%AE%E4%BF%A1%E6%81%AF%EF%BC%8C%E8%BF%99%E9%87%8C%E4%B8%80%E6%AC%A1%E8%AE%B0%E5%BD%95%E4%BB%A5%E5%90%8E%E5%A4%9A%E6%AC%A1%E8%B0%83%E7%94%A8%EF%BC%8C%E8%8E%B7%E5%8F%96%E6%9B%B4%E9%AB%98%E6%80%A7%E8%83%BD%20%0D%0Afor%20(var%20i%20%3D%200%3B%20i%20%3C%20dragreplaceCont.length%3B%20i%2B%2B)%20%7B%20%0D%0Awith%20(dragreplaceCont%5Bi%5D)%20%7B%20%0D%0Aif%20(dragreplaceCont%5Bi%5D%20%3D%3D%20curTarget)%20%0D%0Acontinue%3B%20%0D%0Avar%20pos%20%3D%20getPosition(dragreplaceCont%5Bi%5D)%3B%20%0D%0AsetAttribute('startWidth'%2C%20parseInt(offsetWidth))%3B%20%0D%0AsetAttribute('startHeight'%2C%20parseInt(offsetHeight))%3B%20%0D%0AsetAttribute('startLeft'%2C%20pos.x)%3B%20%0D%0AsetAttribute('startTop'%2C%20pos.y)%3B%20%0D%0A%7D%20%0D%0A%7D%20%2F%2F%E8%AE%B0%E5%BD%95end%20%0D%0A%7D%20%2F%2F%E5%88%9A%E5%BC%80%E5%A7%8B%E6%8B%96%E6%8B%BDend%20%0D%0A%7D%20%0D%0A%2F%2F%E6%AD%A3%E5%9C%A8%E6%8B%96%E6%8B%BD%20%0D%0Aif%20(curTarget%20!%3D%20null)%20%7B%20%0D%0A%2F%2F%20move%20our%20helper%20div%20to%20wherever%20the%20mouse%20is%20(adjusted%20by%20mouseOffset)%20%0D%0AdragHelper.style.top%20%3D%20mousePos.y%20-%20mouseOffset.y%20%2B%20%22px%22%3B%20%0D%0AdragHelper.style.left%20%3D%20mousePos.x%20-%20mouseOffset.x%20%2B%20%22px%22%3B%20%0D%0A%2F%2F%E6%8B%96%E6%8B%BD%E5%85%83%E7%B4%A0%E7%9A%84%E4%B8%AD%E7%82%B9%20%0D%0Avar%20xPos%20%3D%20mousePos.x%20-%20mouseOffset.x%20%2B%20(parseInt(curTarget.getAttribute('startWidth'))%20%2F%202)%3B%20%0D%0Avar%20yPos%20%3D%20mousePos.y%20-%20mouseOffset.y%20%2B%20(parseInt(curTarget.getAttribute('startHeight'))%20%2F%202)%3B%20%0D%0Avar%20havedrop%20%3D%20false%3B%20%0D%0Afor%20(var%20i%20%3D%200%3B%20i%20%3C%20dragreplaceCont.length%3B%20i%2B%2B)%20%7B%20%0D%0Awith%20(dragreplaceCont%5Bi%5D)%20%7B%20%0D%0Aif%20(dragreplaceCont%5Bi%5D%20%3D%3D%20curTarget)%20%0D%0Acontinue%3B%20%0D%0Aif%20((parseInt(getAttribute('startLeft'))%20%3C%20xPos)%20%26%26%20%0D%0A(parseInt(getAttribute('startTop'))%20%3C%20yPos)%20%26%26%20%0D%0A((parseInt(getAttribute('startLeft'))%20%2B%20parseInt(getAttribute('startWidth')))%20%3E%20xPos)%20%26%26%20%0D%0A((parseInt(getAttribute('startTop'))%20%2B%20parseInt(getAttribute('startHeight')))%20%3E%20yPos))%20%7B%20%0D%0Ahavedrop%20%3D%20true%3B%20%0D%0AdropTarget%20%3D%20dragreplaceCont%5Bi%5D%3B%20%0D%0AdropTarget.className%20%3D%20'usr%20catch'%3B%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Aif%20(!havedrop%20%26%26%20dropTarget%20!%3D%20null)%20%7B%20%0D%0AdropTarget.className%20%3D%20'usr'%3B%20%0D%0AdropTarget%20%3D%20null%3B%20%0D%0A%7D%20%0D%0A%7D%20%2F%2F%E6%AD%A3%E5%9C%A8%E6%8B%96%E6%8B%BDend%20%0D%0AlMouseState%20%3D%20iMouseDown%3B%20%0D%0Aif%20(curTarget)%20return%20false%3B%20%2F%2F%E9%98%BB%E6%AD%A2%E5%85%B6%E5%AE%83%E5%93%8D%E5%BA%94%EF%BC%88%E5%A6%82%EF%BC%9A%E9%BC%A0%E6%A0%87%E6%A1%86%E9%80%89%E6%96%87%E6%9C%AC%EF%BC%89%20%0D%0A%7D%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E6%9D%BE%E5%BC%80%20%0D%0Afunction%20mouseUp(ev)%20%7B%20%0D%0Aif%20(curTarget)%20%7B%20%0D%0AdragHelper.style.display%20%3D%20'none'%3B%20%2F%2F%E9%9A%90%E8%97%8F%E8%BE%85%E5%8A%A9%E5%B1%82%20%0D%0Aif%20(curTarget.style.display%20%3D%3D%20'none'%20%26%26%20dropTarget%20!%3D%20null)%20%7B%20%0D%0A%2F%2F%E6%9C%89%E5%85%83%E7%B4%A0%E6%8E%A5%E7%BA%B3%EF%BC%8C%E4%B8%A4%E8%80%85%E4%BA%92%E6%8D%A2%20%0D%0Avar%20destP%20%3D%20dropTarget.parentNode%3B%20%0D%0Avar%20sourceP%20%3D%20curTarget.parentNode%3B%20%0D%0AdestP.appendChild(curTarget)%3B%20%0D%0AsourceP.appendChild(dropTarget)%3B%20%0D%0AdropTarget.className%20%3D%20'usr'%3B%20%0D%0AdropTarget%20%3D%20null%3B%20%0D%0Aif%20(callbackFunc%20!%3D%20null)%20%7B%20%0D%0AcallbackFunc(curTarget)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0AcurTarget.style.display%20%3D%20''%3B%20%0D%0AcurTarget.style.visibility%20%3D%20'visible'%3B%20%0D%0AcurTarget.setAttribute('candrag'%2C%20'1')%3B%20%0D%0A%7D%20%0D%0AcurTarget%20%3D%20null%3B%20%0D%0AiMouseDown%20%3D%20false%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E6%8C%89%E4%B8%8B%20%0D%0Afunction%20mouseDown(ev)%20%7B%20%0D%0A%2F%2F%E8%AE%B0%E5%BD%95%E5%8F%98%E9%87%8F%E7%8A%B6%E6%80%81%20%0D%0AiMouseDown%20%3D%20true%3B%20%0D%0A%2F%2F%E8%8E%B7%E5%8F%96%E4%BA%8B%E4%BB%B6%E5%B1%9E%E6%80%A7%20%0D%0Aev%20%3D%20ev%20%7C%7C%20window.event%3B%20%0D%0Avar%20target%20%3D%20ev.target%20%7C%7C%20ev.srcElement%3B%20%0D%0Aif%20(target.onmousedown%20%7C%7C%20target.getAttribute('candrag'))%20%7B%2F%2F%E9%98%BB%E6%AD%A2%E5%85%B6%E5%AE%83%E5%93%8D%E5%BA%94%EF%BC%88%E5%A6%82%EF%BC%9A%E9%BC%A0%E6%A0%87%E5%8F%8C%E5%87%BB%E6%96%87%E6%9C%AC%EF%BC%89%20%0D%0Areturn%20false%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E8%BF%94%E5%9B%9E%E5%BD%93%E5%89%8Ditem%E7%9B%B8%E5%AF%B9%E9%A1%B5%E9%9D%A2%E5%B7%A6%E4%B8%8A%E8%A7%92%E7%9A%84%E5%9D%90%E6%A0%87%20%0D%0Afunction%20getPosition(e)%20%7B%20%0D%0Avar%20left%20%3D%200%3B%20%0D%0Avar%20top%20%3D%200%3B%20%0D%0Awhile%20(e.offsetParent)%20%7B%20%0D%0Aleft%20%2B%3D%20e.offsetLeft%20%2B%20(e.currentStyle%20%3F%20(parseInt(e.currentStyle.borderLeftWidth)).NaN0()%20%3A%200)%3B%20%0D%0Atop%20%2B%3D%20e.offsetTop%20%2B%20(e.currentStyle%20%3F%20(parseInt(e.currentStyle.borderTopWidth)).NaN0()%20%3A%200)%3B%20%0D%0Ae%20%3D%20e.offsetParent%3B%20%0D%0A%7D%20%0D%0Aleft%20%2B%3D%20e.offsetLeft%20%2B%20(e.currentStyle%20%3F%20(parseInt(e.currentStyle.borderLeftWidth)).NaN0()%20%3A%200)%3B%20%0D%0Atop%20%2B%3D%20e.offsetTop%20%2B%20(e.currentStyle%20%3F%20(parseInt(e.currentStyle.borderTopWidth)).NaN0()%20%3A%200)%3B%20%0D%0Areturn%20%7B%20x%3A%20left%2C%20y%3A%20top%20%7D%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E8%BF%94%E5%9B%9E%E9%BC%A0%E6%A0%87%E7%9B%B8%E5%AF%B9%E9%A1%B5%E9%9D%A2%E5%B7%A6%E4%B8%8A%E8%A7%92%E7%9A%84%E5%9D%90%E6%A0%87%20%0D%0Afunction%20mouseCoords(ev)%20%7B%20%0D%0Aif%20(ev.pageX%20%7C%7C%20ev.pageY)%20%7B%20%0D%0Areturn%20%7B%20x%3A%20ev.pageX%2C%20y%3A%20ev.pageY%20%7D%3B%20%0D%0A%7D%20%0D%0Areturn%20%7B%20%0D%0Ax%3A%20ev.clientX%20%2B%20document.body.scrollLeft%20-%20document.body.clientLeft%2C%20%0D%0Ay%3A%20ev.clientY%20%2B%20document.body.scrollTop%20-%20document.body.clientTop%20%0D%0A%7D%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E4%BD%8D%E7%BD%AE%E7%9B%B8%E5%AF%B9%E4%BA%8Eitem%E7%9A%84%E5%81%8F%E7%A7%BB%E9%87%8F%20%0D%0Afunction%20getMouseOffset(target%2C%20ev)%20%7B%20%0D%0Aev%20%3D%20ev%20%7C%7C%20window.event%3B%20%0D%0Avar%20docPos%20%3D%20getPosition(target)%3B%20%0D%0Avar%20mousePos%20%3D%20mouseCoords(ev)%3B%20%0D%0Areturn%20%7B%20x%3A%20mousePos.x%20-%20docPos.x%2C%20y%3A%20mousePos.y%20-%20docPos.y%20%7D%3B%20%0D%0A%7D%20%0D%0Awindow.onload%20%3D%20function()%20%7B%20%0D%0Adocument.onmousemove%20%3D%20mouseMove%3B%20%0D%0Adocument.onmousedown%20%3D%20mouseDown%3B%20%0D%0Adocument.onmouseup%20%3D%20mouseUp%3B%20%0D%0A%2F%2F%E8%BE%85%E5%8A%A9%E5%B1%82%E7%94%A8%E6%9D%A5%E6%98%BE%E7%A4%BA%E6%8B%96%E6%8B%BD%20%0D%0AdragHelper%20%3D%20document.createElement('DIV')%3B%20%0D%0AdragHelper.style.cssText%20%3D%20'position%3Aabsolute%3Bdisplay%3Anone%3B'%3B%20%0D%0Adocument.body.appendChild(dragHelper)%3B%20%0D%0Asetdragreplace(document.getElementById('345'))%3B%20%0D%0Asetdragreplace(document.getElementById('123'))%3B%20%0D%0Asetdragreplace(document.getElementById('456'))%3B%20%0D%0A%7D%3B%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程
