How to implement drag-and-drop on web pages using JavaScript

This experience describes the method of dragging web page elements using native JavaScript, as well as the advanced content of dragging.

1. Add the HTML and CSS code yourself.

The JavaScript code is as follows:

<script>
window.onload=function ()
{
    var oDiv=document.getElementById(&#39;div1&#39;);
    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+&#39;px&#39;;
            oDiv.style.top=oEvent.clientY-disY+&#39;px&#39;;        
            };                
            document.onmouseup=function ()        
            {            
            document.onmousemove=null;
            document.onmouseup=null;        
            };    
            };
            };
            </script>

Drag and drop code encapsulation and calling

<script>
window.onload=function ()
{
    drag(&#39;div1&#39;);
    drag(&#39;div2&#39;);
    drag(&#39;div3&#39;);
};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+&#39;px&#39;;
            oDiv.style.top=oEvent.clientY-disY+&#39;px&#39;;        
            };       
       document.onmouseup=function ()        
       {
            document.onmousemove=null;
            document.onmouseup=null;        
            };    
            };}
            </script>

Drag and drop advanced with virtual frame

1. Drag and drop with virtual frame can be realized on the web page, the effect is as shown in the figure.

#JavaScript code:

<script>
window.onload=function (){    
var oDiv=document.getElementById(&#39;div1&#39;);        
oDiv.onmousedown=function (ev)    
{        
var oEvent=ev||event;        
var disX=oEvent.clientX-oDiv.offsetLeft;        
var disY=oEvent.clientY-oDiv.offsetTop;                
var oNewDiv=document.createElement(&#39;div&#39;);                
oNewDiv.className=&#39;box&#39;;        
oNewDiv.style.width=oDiv.offsetWidth-2+&#39;px&#39;;        
oNewDiv.style.height=oDiv.offsetHeight-2+&#39;px&#39;;        
oNewDiv.style.left=oDiv.offsetLeft+&#39;px&#39;;        
oNewDiv.style.top=oDiv.offsetTop+&#39;px&#39;;                
document.body.appendChild(oNewDiv);                
document.onmousemove=function (ev)        
{            
var oEvent=ev||event;                        
oNewDiv.style.left=oEvent.clientX-disX+&#39;px&#39;;            
oNewDiv.style.top=oEvent.clientY-disY+&#39;px&#39;;        
};                
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>

Drag and drop advanced to change size

1. Drag the lower right corner of the element to change the size of the element. There is a small picture in the lower right corner.

##JavaScript code:

<script>
window.onload=function (){    
var oDiv=document.getElementById(&#39;div1&#39;);    
var oDiv2=document.getElementById(&#39;div2&#39;);    
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+&#39;px&#39;;            
oDiv2.style.height=oEvent.clientY-disY+oDiv.offsetHeight+&#39;px&#39;;        
};        
document.onmouseup=function (){            
document.onmousemove=null;            
document.onmouseup=null;        
};    
};};
</script>

Drag Advanced Collision Detection

1. As shown in the picture, the red block does not change color until it touches the yellow block. After touching it, the yellow block changed color.

#JavaScript code:

<script>
window.onload=function (){    
var oDiv=document.getElementById(&#39;div1&#39;);    
var oDiv2=document.getElementById(&#39;div2&#39;);        
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+&#39;px&#39;;            
oDiv.style.top=oEvent.clientY-disY+&#39;px&#39;;                        
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=&#39;yellow&#39;;            
}            
else            
{                
oDiv2.style.background=&#39;green&#39;;            
}        
};                
document.onmouseup=function ()        
{            
document.onmousemove=null;            
document.onmouseup=null;        
};    
};};
</script>

Drag-and-drop advanced boundary adsorption

1. Implement automatic adsorption when block dragging is close to the document boundary, JavaScript code:

<script>
window.onload=function (){    
var oDiv=document.getElementById(&#39;div1&#39;);        
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+&#39;px&#39;;            
oDiv.style.top=t+&#39;px&#39;;        
};                
document.onmouseup=function ()        
{            
document.onmousemove=null;            
document.onmouseup=null;        
};    
};};
</script>

Drag advanced restriction range

1. The implementation block can only be dragged in a fixed area and cannot Drag out the document. JavaScript code:

<script>
window.onload=function (){    
var oDiv=document.getElementById(&#39;div1&#39;);        
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+&#39;px&#39;;            
oDiv.style.top=t+&#39;px&#39;;        
};                
document.onmouseup=function ()        
{            
document.onmousemove=null;            
document.onmouseup=null;        
};    
};};
</script>

The above is the detailed content of How to implement drag-and-drop on web pages using JavaScript. For more information, please follow other related articles on the PHP Chinese website!