DIV that can be dragged by javascript (2)

Function beginDrag (elementToDrag, event)
{
Var = event. clientX-parseInt (elementToDrag. style. left );
Var deltaY = event. clientY-parseInt (elementToDrag. style. top );
// Here, deltaX/Y is actually the Coordinate Difference Between the mouse and the div.
If (document. addEventListener)
// The reason for this judgment is that IE6 and firefox have different methods for javascript event processing (Versions later than IE7 begin to comply with W3C standards ).
// Document. if addEventlistener is true, it is firefox and other browsers that support W3C DOM standards. In IE6, attachEvent is used for event registration, while in firefox and other browsers, addEventListener is used. The syntax is as follows. The true parameter of the addEventListener function indicates that an 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 is still based on different browsers. stopPropagation is a method used in W3C DOM standards to cancel event propagation. We used document. addEventListener, the browser will spread from the document object down the DOM node to the target node, the registered event handler will run, and then the event will be uploaded back to the parent node, if the parent node also has an event handler, the event will also be handled. To avoid this situation, we can use stopPropagation to prevent event propagation, this method is used to make other elements invisible to this event. In IE6, there is no element capture event process, but this term is called bubble process. The method used in IE6 is cancelBubble, which is used to cancel bubbles, indicating that the event has been handled, other elements no longer need to be seen.
If (event. preventDefault) event. preventDefault ();
Else event. returnValue = false;
// Here, preventDefault is used to notify the browser not to perform the default action associated with the event. returnValue is used to cancel the default action of the event source element, we should be able to see that this plays the same role in different browsers.
// The following are the key functions used in the drag div.
Function moveHandler (e)
{
If (! E) e = window. event; // if it is an event object of IE, use window. event
// Global attribute. Otherwise, the DOM second-level standard Event object is used.
// In IE, event is an attribute of window, that is, a global variable. However, in W3C DOM, event is the attribute of the Document Object where an event occurs. In this program, the event is not important. The key is that we need to obtain the coordinates of the mouse. in IE, when the e parameter is passed in, IE cannot recognize it, so we will assign window to e. event.
ElementToDrag. style. left = (e. clientX-deltaX) + "px ";
ElementToDrag. style. top = (e. clientY-deltaY) + "px ";
// Change the left and top attributes of the currently active 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 );
}
// This function is used to remove the listener. It is relatively simple and will not be detailed.
If (! E) e = window. event;
If (e. stopPropagation) e. stopPropagation ();
Else e. cancelBubble = true;
}
}
Note: If the script cannot run properly, note the replacement of characters, because many websites convert the characters to Chinese Punctuation Marks for installation. This site should be replaced as much as possible.