JavaScript实现网页拖拽的方法-js教程-PHP中文网

JavaScript实现网页拖拽的方法

黄舟

发布： 2017-08-09 11:36:48

原创

2284人浏览过

本经验讲述原生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>

登录后复制

立即学习“Java免费学习笔记（深入）”；

拖拽代码封装与调用

<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.拖动元素右下角可以改变元素的大小，右下角是一个很小的图片。

GNCMS可视化拖拽公司网站模板1.0.0

高端网络建设公司设计类网站模板 IT互联网移动建站类网站源码(带手机版数据同步)本套模板采用现在非常流行的全屏自适应布局设计，且栏目列表以简洁，非常时尚大气。后台支持可视拖拽编辑。模板特点：1、手工书写DIV+CSS、代码精简无冗余。2、自适应结构，全球先进技术，高端视觉体验。3、SEO框架布局，栏目及文章页均可独立设置标题/关键词/描述。4、后台直接修改联系方式、传真、邮箱、地址等，修改更加方

查看详情

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实现网页拖拽的方法的详细内容，更多请关注php中文网其它相关文章！