JS drag-and-drop Summary

Currently, there are two ways to use JavaScript to implement the drag-and-drop function, system drag-and-drop and simulated drag-and-drop.

First, we need to understand that the system drag-and-drop is ie only, that is, the system drag-and-drop can be implemented only on IE.
For system drag-and-drop, ie will give us a small number of drag elements by default, including images, text and links. When we drag an element, the following events are triggered:
Ondragstart: The event triggered on the dragged item when you press the mouse button to start moving the mouse.
Ondrag: After ondragstart is started, ondrag will start all the time, as long as the object is still being dragged, it will be triggered all the time.
Ondragend: When the drag is stopped (put this item down on a valid or invalid placement object), The ondragend event is triggered.

The event triggered on the target object, that is, the element to be dropped, is:
Ondragenter: when an object is dragged to a valid placement target, the ondragenter event is triggered.
Ondragover: When the dragenter event occurs, the dragover event is triggered immediately. When the dragged item is placed within the boundary of the target, it is always triggered.
Ondragleave: when an item is dragged out of the position target, the dragover event is stopped and the dragleave event is triggered.
Ondrop: If the drag-and-drop item is put on this target, the drop event is triggered.

In general, the event of the dragged item always occurs first, except that the drop event is triggered first than the dragend event. Therefore, the sequence of events triggered by dragging an object to two objects is as follows:
Ondragstart-> ondrag-> ondragenter-> ondragover-> (ondragleave | ondrop)-> ondragend

However, drag-and-drop is useless. Unless data can be really affected, ie is a feature of event, and datatransfer object is used for data transmission. This object has two methods: getdata () and setdata (). getdata () are used to obtain the values stored by setdata. You can set two types of data: common text and URL. datatransfer can also be used to determine the types of actions that can be performed on the dragged object and target. This is mainly accomplished through two features: dropeffect and effectallowed. dropeffect uses many values for selection, such as copy and move. It can only be initialized in the ondragstart event. Example:

<Br/> function handledragdropevent (oevent) <br/>{< br/> switch (oevent. type) <br/>{< br/> case "dragstart": <br/> oevent. datatransfer. export tallowed = "move"; <br/> break; <br/> case "dragenter": <br/> // oevent. datatransfer. dropeffect = "move"; <br/> oevent. returnvalue = false; <br/> break; <br/> case "dragover": <br/> oevent. returnvalue = false; <br/> break; <br/> case "Drop": <br/> oevent. returnvalue = false; <br/> oevent. srcelement. innerhtml = oevent. datatransfer. getdata ("text"); <br/>}< br/>

<P> <input type = "text" value = "drag this text" ondragstart = "handledragdropevent (event)"> </P> <p>

We learned how to create our own placement targets. The dragdrop method allows us to create our own drag targets. call the dragdrop method to initialize the system drag object, so that items that cannot be dragged can trigger dragstart, drag, and dragend events.

<Br/> function handlemousemove (oevent) <br/>{< br/> If (oevent. button = 1) <br/>{< br/> oevent. srcelement. dragdrop (); <br/>}< br/> function handledragdropevent (oevent) <br/>{< br/> oevent. datatransfer. setdata ("text", "This is a Red Square"); <br/>}< br/>

</P> This is a red <p>

What should we do if we want to implement drag-and-drop in non-ie mode? This requires virtual drag-and-drop. The idea of virtual drag-and-drop is simple: Create an absolute location layer that can move with the mouse. The instance code is as follows:

<Br/> var idiffx = 0; // The Difference Between the mouse and Div <br/> var idiffy = 0; // The Difference Between the mouse and Div <br/> function handlemousemove () <br/> {<br/> var oevent = Window. event; <br/> var odiv = document. getelementbyid ("div1"); <br/> odiv. style. left = oevent. clientx-idiffx; <br/> odiv. style. top = oevent. clienty-idiffy; <br/>}< br/> function handlemousedown () <br/>{< br/> var oevent = Window. event; <br/> var odiv = document. getelemen Tbyid ("div1"); <br/> idiffx = oevent. clientX-oDiv.offsetLeft; // offsetleft returns the offset from the left boundary of the current element to its left boundary containing the element, in pixels <br/> idiffy = oevent. clientY-oDiv.offsetTop; // offsettop returns the offset, in pixels, of the upper boundary of the current element to its upper boundary containing the element. <Br/> document. body. attachevent ("onmousemove", handlemousemove); <br/> document. body. attachevent ("onmouseup", handlemouseup); <br/>}< br/> function handlemouseup () <br/>{< br/> var oevent = Window. event; <br/> document. body. detachevent ("onmousemove", handlemousemove); <br/> document. body. detachevent ("onmouseup", handlemouseup); <br/> If (isoverdroptarget (oevent. clientx, oevent. clienty) <br/>{< br/> var odiv = document. getelementbyid ("div1"); <br/> var otarget = document. getelementbyid ("divdroptarget"); <br/> odiv. style. left = otarget. offsetleft; <br/> odiv. style. top = otarget. offsettop; <br/>}< br/> // This method accepts a coordinate as a parameter. If the coordinate is placed in the target, true is returned; <br/> function isoverdroptarget (IX, Iy) <br/> {<br/> var otarget = document. getelementbyid ("divdroptarget"); <br/> var ix1 = otarget. offsetleft; <br/> var ix2 = ix1 + otarget. offsetwidth; // offsetwidth returns the width of the element. <br/> var iy1 = otarget. offsettop; <br/> var iy2 = iy1 + otarget. offsetheight; // offsetheight returns the height of an element. <br/> return (IX> = ix1 & IX = iy1 & Iy

<Br/> # div1 <br/> {<br/> background-color: red; <br/> Height: 100px; <br/> width: 100px; <br/> position: absolute; <br/> Z-index: 10; <br/>}< br/> # divdroptarget <br/> {<br/> background-color: Blue; <br/> Height: 200px; <br/> width: 200px; <br/> position: absolute; <br/> left: 300px; <br/>}< br/>

<P>