本经验讲述原生javascript实现网页元素拖拽的方法，以及拖拽的进阶内容。
1.html和css代码自己添加一下。
javascript代码如下：
<script>
window.onload=function ()
{
var odiv=document.getelementbyid('div1');
odiv.onmousedown=function (ev) {
var oevent=ev||event;
var disx=oevent.clientx-odiv.offsetleft;
var disy=oevent.clienty-odiv.offsettop;
document.onmousemove=function (ev)
{
var oevent=ev||event;
odiv.style.left=oevent.clientx-disx+'px';
odiv.style.top=oevent.clienty-disy+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};
};
</script>
拖拽代码封装与调用
<script>
window.onload=function ()
{
drag('div1');
drag('div2');
drag('div3');
};function drag(id){
var odiv=document.getelementbyid(id);
odiv.onmousedown=function (ev)
{
var oevent=ev||event;
var disx=oevent.clientx-odiv.offsetleft;
var disy=oevent.clienty-odiv.offsettop;
document.onmousemove=function (ev)
{
var oevent=ev||event;
odiv.style.left=oevent.clientx-disx+'px';
odiv.style.top=oevent.clienty-disy+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};}
</script>
拖拽进阶之带虚框
1.在网页中可以实现带虚框的拖拽，效果如图所示。
javascript代码：
<script>
window.onload=function (){
var odiv=document.getelementbyid('div1');
odiv.onmousedown=function (ev)
{
var oevent=ev||event;
var disx=oevent.clientx-odiv.offsetleft;
var disy=oevent.clienty-odiv.offsettop;
var onewdiv=document.createelement('div');
onewdiv.classname='box';
onewdiv.style.width=odiv.offsetwidth-2+'px';
onewdiv.style.height=odiv.offsetheight-2+'px';
onewdiv.style.left=odiv.offsetleft+'px';
onewdiv.style.top=odiv.offsettop+'px';
document.body.appendchild(onewdiv);
document.onmousemove=function (ev)
{
var oevent=ev||event;
onewdiv.style.left=oevent.clientx-disx+'px';
onewdiv.style.top=oevent.clienty-disy+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
odiv.style.left=onewdiv.style.left;
odiv.style.top=onewdiv.style.top;
document.body.removechild(onewdiv);
};
};};
</script>
拖拽进阶之改变大小
1.拖动元素右下角可以改变元素的大小，右下角是一个很小的图片。
javascript代码：
<script>
window.onload=function (){
var odiv=document.getelementbyid('div1');
var odiv2=document.getelementbyid('div2');
odiv.onmousedown=function (ev){
var oevent=ev||event;
var disx=oevent.clientx-odiv.offsetleft;
var disy=oevent.clienty-odiv.offsettop;
document.onmousemove=function (ev){
var oevent=ev||event;
odiv2.style.width=oevent.clientx-disx+odiv.offsetwidth+'px';
odiv2.style.height=oevent.clienty-disy+odiv.offsetheight+'px';
};
document.onmouseup=function (){
document.onmousemove=null;
document.onmouseup=null;
};
};};
</script>
拖拽进阶之碰撞检测
1.如图，红色块没碰黄色块之前，不变色。碰之后，黄色块变色了。
javascript代码：
<script>
window.onload=function (){
var odiv=document.getelementbyid('div1');
var odiv2=document.getelementbyid('div2');
odiv.onmousedown=function (ev)
{
var oevent=ev||event;
var disx=oevent.clientx-odiv.offsetleft;
var disy=oevent.clienty-odiv.offsettop;
document.onmousemove=function (ev)
{
var oevent=ev||event;
odiv.style.left=oevent.clientx-disx+'px';
odiv.style.top=oevent.clienty-disy+'px';
var l1=odiv.offsetleft;
var r1=odiv.offsetleft+odiv.offsetwidth;
var t1=odiv.offsettop;
var b1=odiv.offsettop+odiv.offsetheight;
var l2=odiv2.offsetleft;
var r2=odiv2.offsetleft+odiv2.offsetwidth;
var t2=odiv2.offsettop;
var b2=odiv2.offsettop+odiv2.offsetheight;
if(r1<l2 || l1>r2 || b1<t2 || t1>b2)
{
odiv2.style.background='yellow';
}
else
{
odiv2.style.background='green';
}
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};};
</script>
拖拽进阶之边界吸附
1.实现块拖拽时接近文档边界自动吸附，javascript代码：
<script>
window.onload=function (){
var odiv=document.getelementbyid('div1');
odiv.onmousedown=function (ev)
{
var oevent=ev||event;
var disx=oevent.clientx-odiv.offsetleft;
var disy=oevent.clienty-odiv.offsettop;
document.onmousemove=function (ev)
{
var oevent=ev||event;
var l=oevent.clientx-disx;
var t=oevent.clienty-disy;
if(l<50)
{
l=0;
}
else if(l>document.documentelement.clientwidth-odiv.offsetwidth-50)
{
l=document.documentelement.clientwidth-odiv.offsetwidth;
}
if(t<50)
{
t=0;
}
else if(t>document.documentelement.clientheight-odiv.offsetheight-50)
{
t=document.documentelement.clientheight-odiv.offsetheight;
}
odiv.style.left=l+'px';
odiv.style.top=t+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};};
</script>
拖拽进阶之限制范围
1.实现块只能在固定区域拖动，无法拖出文档。javascript代码：
<script>
window.onload=function (){
var odiv=document.getelementbyid('div1');
odiv.onmousedown=function (ev)
{
var oevent=ev||event;
var disx=oevent.clientx-odiv.offsetleft;
var disy=oevent.clienty-odiv.offsettop;
document.onmousemove=function (ev)
{
var oevent=ev||event;
var l=oevent.clientx-disx;
var t=oevent.clienty-disy;
if(l<0)
{
l=0;
}
else if(l>document.documentelement.clientwidth-odiv.offsetwidth)
{
l=document.documentelement.clientwidth-odiv.offsetwidth;
}
if(t<0)
{
t=0;
}
else if(t>document.documentelement.clientheight-odiv.offsetheight)
{
t=document.documentelement.clientheight-odiv.offsetheight;
}
odiv.style.left=l+'px';
odiv.style.top=t+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};};
</script>
以上就是javascript实现网页拖拽的方法的详细内容。