To implement arbitrary drag of Div, we might as well analyze the whole process.
When the mouse clicks on the DIV, triggers an event, lets the div position attribute (left,top) changes with the mouse position change, when the mouse is released, the div position attribute uses the mouse to release the position.
When the mouse clicks trigger event is very easy to do, as long as in the DIV tag plus onmouseclick on it, now we want to solve the problem is how to let the position of the div with the mouse changes in the position.
Although this may be a very simple process of reasoning, let's be more verbose. The left and top of the div are the coordinates of the upper left-hand corner of the Div, when we move the mouse to click in the Div, no doubt the mouse coordinates and DIV coordinates are inconsistent, at this time if we simply let div coordinates equal to the mouse coordinates, then the effect will not look so perfect, So we first have to get the mouse coordinates and DIV coordinates of the difference, and then when the mouse moved to, in the mouse coordinates minus the difference to get the coordinates of the div (if not too clear, then first tutorial the basic knowledge of the Web page).
The next thing is simple, when the mouse moves, we constantly calculate the coordinates of the Div, and change, when the mouse is released, this event was 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's an IE event object, then use the window.event
Global properties, otherwise use the event object of the DOM level two standard.
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;
}
Current 1/2 page
12 Next read the full text
