이 경험에서는 기본 JavaScript를 사용하여 웹 페이지 요소의 드래그 앤 드롭을 구현하는 방법과 드래그 앤 드롭의 고급 콘텐츠를 설명합니다.
1. HTML 및 CSS 코드를 직접 추가합니다.
자바스크립트 코드는 다음과 같습니다.
<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>Drag 고급 충돌 감지
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. 구현 블록은 고정된 영역에서만 드래그할 수 있으며 문서 밖으로 드래그할 수 없습니다. 자바스크립트 코드:
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
