드래그 가능한 div 구현 code_javascript 기술

Dragable p는 특히 브라우저가 js 코드에 비해 충분히 효율적이지 않은 경우 달성하기 상대적으로 어려운 효과입니다. 그러나 js에 대한 Firefox의 지원이 증가하고 있다고 들었는데, 아마도 js가 수행하는 중요한 위치에 올 것입니다. 웹 브라우징의 데스크탑 트렌드에서.

p를 임의로 드래그하려면 전체 프로세스를 분석하는 것이 좋습니다.
p를 마우스로 클릭하면 p의 위치 속성(왼쪽, 위쪽)이 마우스 위치에 따라 변경되도록 이벤트가 발생합니다. 마우스를 놓았을 때 p의 위치 속성은 마우스를 놓았을 때의 위치를 ​​사용합니다. .
마우스 클릭 시 이벤트를 발생시키는 것은 쉽습니다. p 태그에 onmouseclick을 추가하기만 하면 됩니다. 이제 우리가 해결해야 할 문제는 마우스 위치에 따라 p 위치를 변경하는 방법입니다.
아주 간단한 추론 과정일 수도 있지만 분명히 해두겠습니다. p의 왼쪽과 위쪽은 p의 왼쪽 위 모서리의 좌표입니다. 마우스를 p로 이동하고 클릭하면 이때 마우스의 좌표와 p의 좌표가 일치하지 않는다는 것은 의심의 여지가 없습니다. 단순히 p 좌표를 마우스 좌표와 동일하게 만들면 효과가 완벽해 보이지 않으므로 먼저 마우스 좌표와 p 좌표의 차이를 구한 다음 마우스가 그 좌표로 이동할 때 p 좌표를 얻으려면 마우스 좌표에서 이 차이를 빼십시오(그렇지 않다면 웹 페이지의 기본 사항을 먼저 배우십시오).
다음은 간단합니다. 마우스가 움직일 때마다 p의 좌표를 계산하고 마우스를 놓으면 이 이벤트가 제거됩니다.
전체 js 함수는 다음과 같습니다.
function startDrag(elementToDrag,event)
{
var deltaX=event.clientX-parseInt(elementToDrag.style.left)
var deltaY= event.clientY -parseInt(elementToDrag.style.top);
if(document.addEventListener)
{
document.addEventListener("mousemove",moveHandler,true)
document.addEventListener(" mouseup", upHandler,true);
//document.addEventListener("mouseout",upHandler,true);
}
else if(document.attachEvent)
{
document.attachEvent ("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
//document.attachEvent("onmouseout",upHandler)
if(event.stopPropagation) ) event.stopPropagation();
else event.cancelBubble=true;
if(event.preventDefault) event.preventDefault()
else event.returnValue=false;
{
　if (!e) e=window.event; //IE 이벤트 객체라면 window.event
　//전역 속성을 사용하고, 그렇지 않으면 DOM 보조 표준 이벤트 객체를 사용하세요.
elementToDrag.style.left=(e.clientX-deltaX) ”px”;
elementToDrag.style.top=(e.clientY-deltaY) ”px”
if(e.stopPropagation) e .stopPropagation();
else e.cancelBubble=true;
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener ("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);}
else
{
document.detachEvent("onmouseup",upHandler); 🎜>document.detachEvent("onmousemove",moveHandler);}
}
if (!e) e=window.event;
if(e.stopPropagation) e.stopPropagation(); else e.cancelBubble=true;
}

p 드래그를 구현한 이 js 함수에 대해 실제로 선배가 인터넷에 게시한 내용입니다.
function startDrag(elementToDrag,event)
{
var =event.clientX-parseInt(elementToDrag.style.left)
var deltaY=event.clientY-parseInt(elementToDrag.style.top) ;
//여기서 deltaX/Y는 실제로 마우스와 p의 좌표 차이입니다.
if(document.addEventListener)
//여기에 이런 판단을 추가한 이유는 IE6과 Firefox가 JavaScript 이벤트 처리 방식이 다르기 때문입니다(IE7 이후 버전은 W3C 표준을 따르기 시작합니다).
//document.addEventlistener가 true인 경우 W3C DOM 표준을 지원하는 Firefox와 같은 브라우저인 경우 IE6에서는 이벤트 등록을 위해attachEvent를 사용하는 반면, Firefox와 같은 브라우저는 addEventListener를 사용합니다. addEventListener 함수의 true 매개변수는 이벤트가 캡처될 수 있음을 나타냅니다.
{
document.addEventListener("mousemove",moveHandler,true)
document.addEventListener("mouseup",upHandler,true)
//document.addEventListener("mouseout",upHandler ,true);
}
else if(document.attachEvent)
{
document.attachEvent("onmousemove",moveHandler)
document.attachEvent("onmouseup",upHandler);
//document.attachEvent("onmouseout",upHandler)
}
if(event.stopPropagation) event.stopPropagation()
else event.cancelBubble=true;//여기서의 판단은 여전히 ​​다양한 브라우저를 고려합니다. stopPropagation은 W3C DOM 표준에서 이벤트 전파를 취소하는 데 사용되는 방법입니다. document.addEventListener 메소드를 사용했습니다. 브라우저는 DOM 노드를 따라 대상 노드로 전파되고, 상위 노드에도 이벤트가 반환됩니다. 해당 이벤트 핸들러를 사용하면 이벤트도 처리됩니다. 이러한 상황을 방지하기 위해 stopPropagation을 사용하여 이벤트 전파를 방지할 수 있습니다. 이 메소드의 기능은 이 이벤트에 다른 요소를 표시하는 것입니다. IE6에는 요소가 이벤트를 캡처하는 프로세스가 없지만 버블 프로세스라는 용어가 있습니다. IE6에서 사용되는 메소드는 버블을 취소하는 데 사용되며 이벤트가 처리되었으며 다른 요소가 더 이상 필요하지 않음을 나타냅니다. 볼 수 있습니다.
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
//여기서 PreventDefault는 이벤트와 관련된 기본 작업을 수행하지 않도록 브라우저에 알리는 데 사용됩니다. returnValue는 이벤트가 발생한 소스 요소의 기본 동작을 취소하는 데 사용됩니다. 이는 다른 브라우저에서도 동일한 역할을 하는 것을 볼 수 있습니다.
//다음은 p 드래그에 사용되는 주요 기능입니다.
function moveHandler(e)
{
if (!e) e=window.event; //IE 이벤트 객체라면 window.event를 사용하세요.
//그렇지 않으면 전역 속성을 사용하세요. DOM 2차 표준 이벤트 객체를 사용하세요.
//IE에서 event는 전역변수인 window의 속성이지만, W3C DOM에서는 event가 이벤트가 발생한 문서 객체의 속성이다. 이 프로그램에서는 이벤트가 무엇인지는 중요하지 않습니다. IE에서는 e 매개변수가 전달되면 IE가 이를 인식할 수 없으므로 e를 할당합니다. window.event.
elementToDrag.style.left=(e.clientX-deltaX) ”px”;
elementToDrag.style.top=(e.clientY-deltaY) ”px”
//변경 사항은 다음과 같습니다. p의 left 및 top 속성이 사용됩니다.
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener("mouseup",upHandler,true)
document.removeEventListener("mousemove",moveHandler,true)
else
{
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}
//이 함수는 비교적 간단합니다. 자세히 설명하지 않겠습니다.
if (!e) e=window.event;
if(e.stopPropagation) e.stopPropagation()
else e.cancelBubble=true;