javascript draggable DIV (2)_javascript skills

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 the div.
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;
// The judgment here still takes into account different browsers. stopPropagation is a method used in the W3C DOM standard to cancel the propagation of events. We used the document.addEventListener method. The browser will propagate from the document object down the DOM node to the target node. The registered event handler will run, and then the event will be returned to the parent node. If the parent node also has a corresponding event handler, then the event will also be processed. In order to avoid this situation, we can use stopPropagation to prevent the propagation of the event. The function of this method is to make other elements invisible to this event. Under IE6, there is no process for elements to capture events, but there is a term called bubble process. The method used in IE6 is cancelBubble, which is used to cancel bubbles, indicating that the event has been processed and other elements no longer need to be seen.
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
//The preventDefault here is used to notify the browser not to perform the default action associated with the event, and returnValue is used to Cancel the default action of the source element where the event occurs. You should be able to see that this plays the same role in different browsers.
//The following are the key functions used in dragging divs.
function moveHandler(e)
{
if (!e) e=window.event; //If it is an IE event object, then use window.event
//Global attributes, otherwise Just use the DOM second-level standard Event object.
//In IE, event is an attribute of window, which is a global variable, but in W3C DOM, event is an attribute of the document object where the event occurs. In this program, it doesn't matter what the event is. The key is that we need to obtain the coordinate value of the mouse. In IE, when the e parameter is passed in, IE cannot recognize it, so we assign e to window.event.
elementToDrag.style.left=(e.clientX-deltaX) "px";
elementToDrag.style.top=(e.clientY-deltaY) "px";
//Here is the change now The left and top attributes of the div that are used.
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);
}
//This function is used to remove the listener. It is relatively simple. I won’t go into details.
if (!e) e=window.event;
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
}
Note from the editor of Script House: If it does not work properly, please pay attention to the replacement of characters, because many websites convert the characters into Chinese punctuation marks for installation. This site also tries its best to replace.