자바스크립트 드래그 가능한 DIV (2)_javascript 기술

function startDrag(elementToDrag,event)
{
var =event.clientX-parseInt(elementToDrag.style.left)
var deltaY=event.clientY-parseInt(elementToDrag.style.top)
//여기서 deltaX/Y는 실제로 마우스와 div 사이의 좌표 차이입니다.
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는 이벤트가 발생한 소스 요소의 기본 동작을 취소하는 데 사용됩니다. 이는 다른 브라우저에서도 동일한 역할을 하는 것을 볼 수 있습니다.
//div를 드래그할 때 사용하는 주요 기능은 다음과 같습니다.
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"
//변경 사항은 다음과 같습니다. 사용되는 div의 왼쪽 및 위쪽 속성입니다.
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; Script House 편집자의 주의사항: 제대로 작동하지 않을 경우 문자 교체에 주의하시기 바랍니다. 많은 웹사이트에서 문자를 중국어 구두점으로 변환하여 설치하기 때문입니다. 이 사이트도 교체를 위해 최선을 다하고 있습니다.