Drag-and-drop is first introduced by IE4.0, and only IE supports this feature at first. But it is now part of the HTML5 standard.
There are 2 kinds of behaviors that can be implemented as drag and drop:
System Drag-and-drop and analog drag-and-drop, which previously only IE implemented the system drag and dropThe advantages of system drag-and-drop: You can implement browsers and desktops, browsers and browsers, Windows, frames between the pages of the movement, drag-and-drop only support image and text drag and drop, and later expanded, now almost all elements can be dragged and dropped.
(i) system drag and drop
1. Drag-and-drop eventsDrag-and-drop events are grouped into 2 categories: events that are dragged and dropped, and events on the drop target
1) Dragged and dropped item eventsSequence of event triggers when an item is triggered: DragStart; Drag Dragend DragStart: When you press the mouse button and start moving the mouse, this event starts to trigger drag: This event is triggered as long as the object is still being dragged, similar to the MouseMove dragend: Drop the item on a valid or invalid drop object when the drag drop is stopped This event is triggered
2) Drop target eventThe sequence of triggers when the dragged item is dragged onto a valid drop target: dragenter; DragOver Dragleave/drop DragEnter: Triggered when the dragged item has just entered a drop target, similar to mouseover DragOver: When the dragged item is triggered in the target boundary, the trigger is stopped when the dragged item is dragged out of the target. DragLeave: When this goal is not the final drop target of the dragged item, the event is triggered when the target is left, similar to the Mouseout drop: This event is triggered instead of DragLeave when the target is the final drop target of the item being dragged.
The sequence of triggers for 2 events is: DragStart drag ... dragenter dragover ... drop dragleave Note: All elements can bind to a drop target event, but do not guarantee that the element is a valid drop object. By default, only a text box (<input/> or <textarea/>) in IE is the only valid drop target on a Web page. If you want to make other elements a valid drop target, you need to block the default behavior of the DragEnter and DragOver events, because they apply only to ie. The method is to set the Event.returnvalue to False (for IE events) in the DragEnter and DragOver event-handling functions. Or call the Event.preventdefault method (for standard events).
2, DataTransfer data transmission objectsJust dragging and dropping is no use, unless the data is passed by drag and drop, which requires the DataTransfer object. This object is an exclusive feature of the event, and exists only in the events handler function. Call method is Event.datatransfer
2.1 Method SetData (), GetData ()One to set the data, one to get the data. SetData only two types of values can be set: text and URL. If it is the text to choose a text type, if it is a link, choose a URL type note Only 2 space can store these 2 types of values, one is put text space, one is put the URL space. Only 11 values can be placed per space, so if you call SetData () repeatedly, you will overwrite the values already stored in the space. The data stored in the DataTransfer object is useful before the drop event occurs, that is, if the data is not captured in the drop event handler, the DataTransfer is destroyed and the data is lost.
2.2 Properties DropEffect and effectallowedDataTransfer objects can be used to transmit data, and to define actions for dragged objects and drop targets.
DropEffectThe DragEnter event acting on the placed target is used to set the placement behavior that is allowed on the drop target, with 4 values: "None": the dragged item cannot be placed on this target, except for the text box (<input/> or <textarea/> ) The default value for all other objects outside; Move: Indicates that the dragged item is moved to the drop target; copy: Indicates that the dragged item is copied to the drop target; Link: Indicates that the dragged item, which is valid for the URL type, opens browsing on the drop object.
effectallowedThe DragStart event that acts on the dragged item, setting which type of dropeffect is allowed for the dragged item. If this property is not set, then DropEffect will not work. Possible value: "None": Drag items do not allow any action "copy": Only "copy" DropEffect "link": Only allow "link" dropeffect "move": Allow only "move" dropeffect Copylink ": Only Allow" copy "and" link "dropeffect" copymove ": Only" copy "and" Move "DropEffect" Linkmove ": Allow only" link "and" Move " DropEffect "All": Allows all types of dropeffect.
Sample code: May be wrong, but can help understand
<! DOCTYPE html>
(ii) Simulation of drag -and-dropObviously the system drag and drop is very powerful in IE, but to develop a drag-and-drop program that runs between multiple browsers, the system drag and drop doesn't work, because only IE supports this feature, and other browsers do not develop this feature. (Of course HTML5 changed after that). This is achieved by simulating drag-and-drop on other browsers that do not support system drag-and-drop.
Simulate the idea of drag-and-drop: Create an absolute positioning layer that can be moved with the mouse, allowing the user to feel like using drag-and-drop. The drag-and-drop and drop targets are set to absolute positioning, first registering the MouseDown event on the dragged item, and then when the mouse presses on the dragged item, the MouseDown event handler registers MouseMove and MouseUp events on the body, Finally, when the mouse is released, that is, when the MouseUp event occurs, if the dragged item is in the drop target boundary, the drag-and-drop item is positioned on the drop target, while the MouseMove and MouseUp events on the body are deleted.
Where you want to use the mouse window coordinates: event.clientx/event.clienty; drag-and-drop offsetleft and offsettop of items, offsetheight and offsetwidth to place targets. Direct source code: Detection operation is normal
<!
DOCTYPE html>
