Regarding this js function that implements div drag, it was actually published by a certain senior on the Internet. Here I am just an excerpt and annotation.
function beginDrag(elementToDrag,event)
{
var =-parseInt();
var deltaY=-parseInt();
//The deltaX/Y here actually draws the coordinate difference between the mouse and div.
if()
//The reason for adding such a judgment here is that IE6 and firefox have different methods for JavaScript event handling (versions after IE7 begin to comply with W3C standards).
//If it is true, it means that browsers such as firefox that support W3C DOM standards are used. In IE6, the event registration is used to attachEvent, while browsers such as firefox that use addEventListener. The syntax is as follows. The true parameter of the addEventListener function indicates that events can be caught.
{
(”mousemove”,moveHandler,true);
(”mouseup”,upHandler,true);
//(”mouseout”,upHandler,true);
}
else if()
{
(”onmousemove”,moveHandler);
(”onmouseup”,upHandler);
//(”onmouseout”,upHandler);
}
if() ();
else =true;
//The judgment here still considers different browsers. StopPropagation is a method used in the W3C DOM standard to cancel the propagation of events. We used this method. The browser will propagate down the DOM node from the document object to the target node. The registered event handler will run, and the event will be returned to the parent node. If the parent node also has a corresponding event handler, the event will also be handled. In order to avoid this situation, we can use stopPropagation to prevent the event from spreading. The function of this method is to make other elements invisible to this event. In IE6, there is no process of element capturing events, but there is a term called bubble process. The method used in IE6 is cancelBubble, which means that the event has been processed and no other elements need to be seen again.
if() ();
else =false;
//The preventDefault here is used to notify the browser not to perform the default actions associated with the event, and returnValue is used to cancel the default actions 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 the div.
function moveHandler(e)
{
if (!e) e=; //If it is an IE event object, then use
//Global attributes, otherwise use the DOM secondary standard Event object.
//In IE, event is an attribute of window, that is, a global variable, but in W3C DOM, event is the attribute of the document object where the event occurs. In this program, it doesn't matter what event is. The key is that we need to obtain the coordinate value of the mouse. In IE, when the parameter e is passed in, IE cannot recognize it, so we assign the value to e.
=(-deltaX)+”px”;
=(-deltaY)+”px”;
//This is to change the left and top properties of the div that are currently acting.
if() ();
else =true;
}
function upHandler(e)
{
if()
{
(”mouseup”,upHandler,true);
(”mousemove”,moveHandler,true);
}
else
{
(”onmouseup”,upHandler);
(”onmousemove”,moveHandler);
}
//This function is used to remove the listener. It is relatively simple, so I won't go into details.
if (!e) e=;
if() ();
else =true;
}
}
Previous page12Read the full text