Learning Notes---JavaScript event, drag-and-drop effect under IE browser
1. About the event Common properties are returnvalue (whether to allow event processing to continue, false to stop continuing), Srcelement (Event source object that triggers the event), and Attachevent ("onclick", function () { ...});
2. A. Implement drag and Drop (Drag and drop): currently support IE, if you are customizing an object to be a drag-and-drop object, you must overwrite the DragEnter and DragOver events of the target object, which can be done with event.returnvalue = false;
B. Moved object event: DragStart (triggered when mouse is pressed and started to move), drag (continuous trigger during move), Dragend (release mouse, stop drag-and-drop trigger)
C. Destination object event: DragEnter (triggered when the object is dragged into the range of the destination object), DragOver (triggered continuously when the object is dragged in the range of the destination object), DragLeave (triggered when the dragged object is moved out of the destination object range), drop ( Trigger when drop object is dropped within destination object)
D. Data passing between the moved object and the destination object: complete with the DataTransfer property (string, URL only), and you can save and get data by SetData ("text") and GetData ("url"). Note: Repeating the call to SetData ("text") overwrites the old data.
such as: Event.dataTransfer.setData ("text", "Beijing Hello"); Event.dataTransfer.setData ("URL", http://www.baidu.com);
The data stored in the DataTransfer is allowed before the drop event is triggered, and will be discarded after the drop event is triggered; When you drag text from the text box, the SetData ("text") is automatically called to save.
E. Setting the effect or effect of placement on the target object via the DataTransfer object: implemented by DropEffect and must be handled in the OnDragEnter event.
None: Cannot place, move: Content transfer, copy: Content copy, Link: Destination will browse the contents of the dragged URL.
F. On the object being moved, you also need to set the Effectallowed property and must be handled in the Ondragstart event. This property is used to indicate what kind of dropeffect the dragged object allows.
Possible values: Uninitialized: No action, none: No action Allowed, copy (allow copy), link, move, Copylink (Allow copy and link), Copymove, Linkmove, all
G. To implement drag-and-drop from Object A to object B, you need to set both DropEffect and effectallowed as move.
Javascript-event:
Code
Learning Notes---JavaScript event, drag-and-drop effect under IE browser