So implementieren Sie Drag-and-Drop auf Webseiten mithilfe von JavaScript

Diese Erfahrung beschreibt, wie Drag-and-Drop von Webseitenelementen mithilfe von nativem JavaScript implementiert wird, sowie die erweiterten Inhalte von Drag-and-Drop.

1. Fügen Sie den HTML- und CSS-Code selbst hinzu.

Der JavaScript-Code lautet wie folgt:

<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-Code-Kapselung und Aufruf

<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>

Erweitertes Ziehen mit virtuellem Rahmen

1 Das Ziehen mit virtuellem Rahmen kann auf der Webseite realisiert werden, der Effekt ist wie in der Abbildung dargestellt .

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>

Erweiterte Größenänderung per Drag & Drop

1. Ziehen Sie an der unteren rechten Ecke des Elements, um die Größe des Elements zu ändern. In der unteren rechten Ecke befindet sich ein kleines Bild.

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>

Erweiterte Kollisionserkennung ziehen

1. Wie im Bild gezeigt, ändert der rote Block seine Farbe erst, wenn er den gelben Block berührt. Nach der Berührung änderte der gelbe Block seine Farbe.

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>

Grenzadsorption beim erweiterten Ziehen

1. Implementieren Sie die automatische Adsorption, wenn das Blockziehen nahe an der Dokumentgrenze liegt, 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>

Begrenzter Bereich der Drag-and-Drop-Fortschrittung

1 Der Implementierungsblock kann nur in sein ein fester Bereich Beim Ziehen kann das Dokument nicht herausgezogen werden. 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>

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Drag-and-Drop auf Webseiten mithilfe von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!