Draggable div implementation code_javascript skills

Dragable p is a relatively difficult effect to achieve, especially when the browser is not efficient enough for js code. However, I heard that Firefox’s support for js is increasing, which is probably the case. Come to the important position js plays in the desktop trend of web browsing.

To achieve arbitrary dragging of p, we might as well analyze the whole process.
When the mouse clicks p, an event is triggered so that the position attributes (left, top) of p change with the mouse position. When the mouse is released, the position attribute of p uses the position when the mouse is released.
It is easy to trigger an event when the mouse clicks. Just add onmouseclick to the p tag. Now the problem we have to solve is how to make the position of p change with the position of the mouse.
Although this may be a very simple reasoning process, let’s make it clear. The left and top of p are the coordinates of the upper left corner of p. When we move the mouse to p and click, there is no doubt that the coordinates of the mouse and the coordinates of p are inconsistent. At this time, if we simply make the coordinates of p equal to the coordinates of the mouse , then the effect will not look so perfect, so we first need to get the difference between the mouse coordinates and the p coordinate, and then when the mouse moves to it, subtract this difference from the mouse coordinates to get the p coordinate (if not If you understand it too well, then learn the basics of web pages first).
The next thing is simple. When the mouse moves, we continuously calculate the coordinate of p and change it. When the mouse is released, this event is removed.
The entire js function is as follows:
function beginDrag(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;
function moveHandler(e)
{
　if (!e) e=window.event; //If it is an IE event object, then use window.event
　//Global attributes, otherwise use the DOM secondary standard Event object.
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;
}

About this js function that implements p dragging, it was actually published on the Internet by a senior. Here is just an excerpt and annotation.
function beginDrag(elementToDrag,event)
{
var =event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top) ;
//The deltaX/Y here is actually the coordinate difference between the mouse and p.
if(document.addEventListener)
//The reason why such a judgment is added here is because IE6 and firefox have different methods for JavaScript event processing (versions after IE7 begin to comply with W3C standards).
//If document.addEventlistener is true, it is a browser such as Firefox that supports the W3C DOM standard. In IE6, attachEvent is used to register events, while browsers such as Firefox use addEventListener. The syntax is as follows. The true parameter of the addEventListener function indicates that the event can be captured.
{
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;