javascript实现拖拽并替换网页块元素
作者：bea
找了一些现成的插件，发现都不太符合我的需求，于是参考网上的例子自己实现了一个，还没有优化。 还是贴代码吧： 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/xht
找了一些现成的插件，发现都不太符合我的需求，于是参考网上的例子自己实现了一个，还没有优化。
还是贴代码吧： 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需刷新才能执行]
有用 | 无用
还是贴代码吧： 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 实现双色表格实现代码
- JavaScript 利用StringBuffer类提升+=拼接字符串效率
- asp.net下利用js实现返回上一页的实现方法小集
- javascript select控件间内容互相移动
- dropdownlist之间的互相联动实现（显示与隐藏）
- 根据鼠标的位置动态的控制层的位置
- js cookies实现简单统计访问次数
- js获取图片长和宽度的代码
- 写出更好的JavaScript程序之undefined篇（中）
- 通过身份证号得到出生日期和性别的js代码
- javascript 在网页中的运用(asp.net)
- javascript DOM编程实例(智播客学习)
- 传智播客学习之java 反射
- Javascript 刷新全集常用代码
- 写出更好的JavaScript之undefined篇（上）
- JavaScript中全局变量、函数内变量以及常量表达式的效率测试
- COM中获取JavaScript数组大小的代码
- 面向对象的编程思想在javascript中的运用上部
- javascript 设置文本框中焦点的位置