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

发布于 2017-04-17 21:44:00 | 60 次阅读 | 评论: 0 | 来源: 网友投递

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

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

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

还是贴代码吧：
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> 
<div> 
<span class="usr" id="345">学生甲</span></div> 
<div> 
<span class="usr" id="123">学生乙</span></div> 
<div> 
 
</div> 
<div> 
<span class="usr" id="456">学生一</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需刷新才能执行]

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

JavaScript客户端脚本语言

后端技术

前端技术

数据库

热门框架

常用IDE

其他