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需再刷新一下页面才能执行]

您可能感兴趣的文章:

jquery插件锦集【推荐】
本文主要分享了jquery插件: 时钟效果; 倒计时; 全选效果; tab点击切换; tab鼠标移动切换; 文本输入搜索等。具有很好的参考价值需要的朋友一起来看下吧
2016-12-12
JS选中checkbox后获取table内一行TD所有数据的方法
这篇文章主要介绍了JS选中checkbox后获取table内一行TD所有数据的方法,涉及javascript针对table元素遍历与获取的技巧,需要的朋友可以参考下
2015-07-07
JavaScript实现简单图片切换
这篇文章主要为大家详细介绍了JavaScript实现简单图片切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
js处理表格对table进行修饰
这篇文章主要介绍了js处理表格对table进行修饰的一些小技巧,需要的朋友可以参考下
2014-05-05
bootstrap多层模态框滚动条消失的问题
本篇文章主要介绍了bootstrap多层模态框滚动条消失的问题，具有一定的参考价值，有兴趣的可以了解一下
2017-07-07
JS数组去重与取重的示例代码
本篇文章主要是对JS数组去重与取重的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
服务器安全设置的几个注册表设置
服务器安全设置的几个注册表设置...
2007-07-07
JavaScript prototype 使用介绍
用过JavaScript的同学们肯定都对prototype如雷贯耳，但是这究竟是个什么东西却让初学者莫衷一是，只知道函数都会有一个prototype属性，可以为其添加函数供实例访问，其它的就不清楚了，最近看了一些 JavaScript高级程序设计，终于揭开了其神秘面纱
2013-08-08
JavaScript 10件让人费解的事情
JavaScript 可算是世界上最流行的编程语言，它曾被 Web 开发设计师贴上噩梦的标签，虽然真正的噩梦其实是 DOM API，这个被大量的开发与设计师随手拈来增强他们的 Web 前端的脚本语言，如今越来越被重视，虽则如此，JavaScript 仍然拥有很多让人费解的东西。
2010-02-02
JS 实现列表与多选框选择附预览动画
本节为大家介绍的是用JS实现列表与多选框选择，并附gif演示动画，这个例子很详细，大家可以看看
2014-10-10