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

更新时间：2009年11月20日 21:52:39 作者：

实现类似于学生换座位的效果，将网页内的两个元素通过拖拽的方式互换。

找了一些现成的插件，发现都不太符合我的需求，于是参考网上的例子自己实现了一个，还没有优化。

还是贴代码吧：
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> <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需再刷新一下页面才能执行]

您可能感兴趣的文章:

详细聊聊JS中不一样的深拷贝
对于js中的对象的深拷贝在项目的开发中比较常用到,这篇文章主要给大家介绍了关于JS中不一样的深拷贝的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-10-10
javascript instanceof 内部机制探析
在 JavaScript 中，可以用 instanceof 来判断一个对象是不是某个类或其子类的实例。
2010-10-10
javascript头像上传代码实例
这篇文章主要介绍了javascript头像上传代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
JS 获取页面尺寸的方法详解
通过 JS 获取页面相关的尺寸是比较常见的操作,尤其是在动态计算页面布局时,今天我们就来学习一下几个获取页面尺寸的基本方法,需要的朋友可以参考下
2023-09-09
JavaScript中slice和padEnd的使用小结
本文介绍了JavaScript中slice和padEnd的使用小结,常常被用于数据处理、格式化和切割任务中,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-12-12
JavaScript实现楼层效果
这篇文章主要为大家详细介绍了JavaScript实现楼层效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
JS实现字符串中去除指定子字符串方法分析
这篇文章主要介绍了JS实现字符串中去除指定子字符串方法,结合实例形式分析了javascript使用字符串替换与分割、聚合两种子字符串去除相关操作技巧,需要的朋友可以参考下
2018-05-05
在页面加载之后执行JavaScript
这篇文章主要介绍了在页面加载之后执行JavaScript的详细过程，本文通过实例代码文字解说给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-06-06
解析利用javascript如何判断一个数为素数
本文主要分享了利用javascript如何判断一个数为素数的具体实例代码，有需要的朋友可以作为参考看下
2016-12-12
js中setTimeout的妙用--防止循环超时
本文主要介绍了使用setTimeout实现防止循环超时的方法，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具