Learning Notes---JavaScript event, drag-and-drop effect under IE browser

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.