JavaScript非常强悍的拖动层-优快云博客

本文链接：https://blog.youkuaiyun.com/beichen_/article/details/3998093

本文介绍了一个简单的网页元素拖拽功能实现方案，通过JavaScript与HTML结合，实现了网页中的div元素的拖拽及放置效果。该方案兼容不同浏览器，并提供了详细的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

<head>

<style>

*{font-size:12px}

body{

text-align:center;

}

.div{

color:#7787cc;

background-color:#e5eef9;

width:200px;

height:150px;

border:1px solid gray;

}

.out{

float:left;

margin:2px;

height:100%;

border:1px solid blue;

width:200px;

}

#layout{

text-align:center;

width:840px;

border:1px solid gray;

margin:auto;

height:100%;

}

</style>

var isIE = (document.all) ? true : false;

//自定义

var $ = function (id){

return document.getElementById(new String(id));

};

var $N = function (name){

return document.getElementsByTagName(new String(name));

};

//拓展FF下outerHTML

if(typeof(HTMLElement)!="undefined" && !window.opera)

{

HTMLElement.prototype.__defineGetter__("outerHTML",function()

{

var a=this.attributes, str="<"+this.tagName, i=0;for(;i<a.length;i++)

if(a[i].specified)

str+=" "+a[i].name+'="'+a[i].value+'"';

if(!this.canHaveChildren)

return str+" />";

return str+">"+this.innerHTML+"</"+this.tagName+">";

});

HTMLElement.prototype.__defineSetter__("outerHTML",function(s)

{

var r = this.ownerDocument.createRange();

r.setStartBefore(this);

var df = r.createContextualFragment(s);

this.parentNode.replaceChild(df, this);

return s;

});

HTMLElement.prototype.__defineGetter__("canHaveChildren",function()

{

});

}

var draged=false;

var lastX,lastY,lastLeft,lastTop;

var ao;

function dragStart(event){

//alert("asd");

ao=event.srcElement||event.target;

draged=true;

tdiv=document.createElement("div");

tdiv.innerHTML=ao.outerHTML;//FF下用什么代替outerHTML

tdiv.style.display="block";

tdiv.style.position="absolute";

tdiv.style.filter="alpha(opacity=70)";

tdiv.style.cursor="move";

tdiv.style.width=ao.offsetWidth;

tdiv.style.height=ao.offsetHeight;

tdiv.style.top=getInfo(ao).top;

tdiv.style.left=getInfo(ao).left;

document.body.appendChild(tdiv);

lastX=event.clientX;

lastY=event.clientY;

lastLeft=tdiv.style.left;

lastTop=tdiv.style.top;

if(isIE){

document.attachEvent("onmousemove",draging);

document.attachEvent("onmouseup",dragEnd);

}

else{

document.addEventListener("mousemove",draging,false);

document.addEventListener("mouseup",dragEnd,false);

}

function draging(event){//重要:判断MOUSE的位置

if(!draged)return;

var tX=event.clientX;

var tY=event.clientY;

tdiv.style.left=parseInt(lastLeft)+tX-lastX;

tdiv.style.top=parseInt(lastTop)+tY-lastY;

var outers = document.getElementsByTagName("div");

for(var i=0;i<outers.length;i++){

if(outers[i].className=='out'){

var outer=getInfo(outers[i]);

if(tX>=outer.left&&tX<=outer.right&&tY>=outer.top&&tY<=outer.bottom){

var subLans=outers[i].getElementsByTagName("div");//获取单元格下所有的表格

if(subLans.length==0){//如果没有表格就放进去

if(tX>=outer.left&&tX<=outer.right&&tY>=outer.top&&tY<=outer.bottom){

outers[i].appendChild(ao);

}

break;//直接退出

}

for(var j=0;j<subLans.length;j++){

var subLan=getInfo(subLans[j]);

if(tX>=subLan.left&&tX<=subLan.right&&tY>=subLan.top&&tY<=subLan.bottom){

// outers[i].insertBefore(ao,subLans[j]);//在它之前放入这个表格

//alert(subLans[j].parentNode==outers[i])

subLans[j].parentNode.insertBefore( ao , subLans[j]);

break;

}else{

outers[i].appendChild(ao);//否则放在最后

}

//清除选中

window.getSelection && window.getSelection().removeAllRanges();//FF

document.onselectstart = function () { event.returnValue = false; }//IE

}

var i=0;

function dragEnd(){

if(!draged)return;

draged=false;

mm=ff(150,30);

}

function ff(aa,ab){//用于恢复位置.

//var tdiv_ = tdiv.cloneNode(true);//动态创建不同的div。避免拖动太快造成的闭包变量重复操作引起的错误。

//怎样动态创建名字啊啊我汗

// document.body.appendChild(tdiv);

var ac=parseInt(getInfo(tdiv).left);

var ad=parseInt(getInfo(tdiv).top);

var ae=(ac-getInfo(ao).left)/ab;

var af=(ad-getInfo(ao).top)/ab;

return setInterval(function(){if(ab<1){

clearInterval(mm);

//tdiv.removeNode(true);//在IE下删除节点

document.body.removeChild(tdiv);

ao=null;;

}

ab--;

ac-=ae;

ad-=af;

tdiv.style.left=parseInt(ac)+"px";

tdiv.style.top=parseInt(ad)+"px"

}

,aa/ab)

}

function inint(){//初始化

var subDivs = $N("div");

for(var j=0;j<subDivs.length;j++){

if(subDivs[j].className=='div'){

if (isIE) {

subDivs[j].attachEvent("onmousedown",dragStart);

} else {

subDivs[j].addEventListener("mousedown",dragStart,false);

}

var lb = function(){

alert(321);

}

var getInfo = function (o){//取得坐标

var to=new Object();

to.left=to.right=to.top=to.bottom=0;

var twidth=o.offsetWidth;

var theight=o.offsetHeight;

while(o!=document.body){

to.left+=o.offsetLeft;

to.top+=o.offsetTop;

o=o.offsetParent;

}

to.right=to.left+twidth;

to.bottom=to.top+theight;

return to;

}

</script>

</head>

<div class="div" name="lan">number1</div>

<div class="div" name="lan">number1.1</div>

</div>

<div class="div" name="lan">number2</div>

<div class="div" name="lan">number2.1</div>

</div>

<div class="div" name="lan">number3</div>

<div class="div" name="lan">number3.1</div>

<div class="div" name="lan">number3.2</div>

</div>

<div class="div" name="lan">number4</div>

<div class="div" name="lan">number4.1</div>

<div class="div" name="lan">number4.2</div>

</div>

</body>

</html>