Drag and Drop is first introduced by ie4.0. At first, only ie supports this function. But it is now part of the HTML5 standard.
There are two ways to drag and drop:
System drag-and-drop and simulated drag-and-drop. In the past, only ie implemented system drag-and-drop.Advantages of system drag-and-drop: it can be used to move between the browser and the desktop, between the browser and the browser, between the window, and between the frame pages. drag-and-drop supports only image and text drag-and-drop at the beginning, and then expands, almost all elements can now be dragged and dropped. (1) system drag and drop
1. drag and drop eventsDrag-and-drop events can be divided into two types: events that are dragged and dropped items and events that are placed on the target. 1) events that are triggered when a drag-and-drop event is triggered: dragstart; drag; dragend dragstart: When you press the mouse button and start to move the mouse, start to trigger this event drag: as long as the object is still dragged, this event will be triggered all the time, similar to mousemove dragend: this event is triggered when the drag-and-drop is stopped (this item is put down on a valid or invalid placement object). 2. When a drag-and-drop item is dragged to a valid placement object, the order of the event is triggered: dragenter; dragover; dragleave/dropdragenter: triggered when a drag-and-drop item enters the placed target, similar to mouseoverdragover: a drag-and-drop item is always triggered within the target boundary, when a drag-and-drop item is dragged out of the target, trigger dragleave: when the target is not the final placement target of the drag-and-drop item, this event is triggered when the target is left, similar to mouseoutdrop: when this target is the final result of a drag-and-drop item , This event is triggered instead of dragleave.
The trigger sequence of the two events is: dragstart drag .... dragenter dragover ..... drop dragleave dragend Note: all elements can be bound to events where the target is to be placed, but this element is not guaranteed to be a valid object. By default, only text boxes (<input/> or <textarea/>) in IE are valid placement targets on webpages. To change other elements to a valid placement target, block the default behavior of the dragenter and dragover events, because these are only applicable to IE. The method is to set event. returnvalue to false (applicable to IE events) in the event handler functions of dragenter and dragover, or call the event. preventdefault method (applicable to standard events ).
2. It is useless to drag and drop the data transmission object of datatransfer. Unless the data is passed through the drag and drop operation, this requires the datatransfer object. This object is the exclusive feature of the event and only exists in the event processing function. The call method is event. datatransfer.
The setdata () and getdata () methods are used to set data and the other to obtain data. Setdata can only be set to text or URL. If the text type is selected, if the link type is selected, the URL type should be selected. Note that only two spaces can be used to store the two types of values, and one is the space for putting the text, one is the URL space. Each space can have only one value. Therefore, if you call setdata () repeatedly, the stored values in the space are overwritten. The data stored in the datatransfer object is useful only when the drop event occurs. That is, if the data is not obtained in the drop event processing function, the datatransfer will be destroyed and the data will be lost. 2.2 dropeffect and effectalloweddatatransfer objects are not imported and can be used to transmit data. They can also define actions for dragged objects and placement targets.
DropeffectThe dragenter event acting on the target to be placed. It is used to set the behavior that can be placed on the target. There are four values:
- "None": the drag-and-drop items cannot be placed on this target. The default values of all objects except the text box (<input/> or <textarea/>) are the default values;
- "Move": indicates that the drag-and-drop item should be moved to the placed destination;
- "Copy": indicates that the drag-and-drop items must be copied to the target;
- "Link": indicates that the dragged item (valid only for URL type) will open browsing on the placed object.
EffectallowedAct on the dragstart event of the dragged item and set the type of dropeffect that is allowed by the dragged item. If this attribute is not set, dropeffect does not work. Possible values:
- "None": no action is allowed on the drag item.
- "Copy": Only "copy" dropeffect is allowed
- "Link": Only dropeffect of "Link" is allowed.
- "Move": Only dropeffect of "move" is allowed.
- "Copylink": Only dropeffect of "copy" and "Link" is allowed
- "Copymove": Only dropeffect of "copy" and "move" are allowed.
- "Linkmove": Only dropeffect of "Link" and "move" are allowed.
- "All": Allow all types of dropeffect.
Sample Code: It may be wrong, but it can help you understand
<! Doctype HTML>
(2) Simulated drag-and-drop is obviously very powerful in IE, but to develop a drag-and-drop program running between multiple browsers, the system drag-and-drop will not work, because only ie supports this function, other browsers do not develop this function. (Of course, HTML5 has changed ). In other browsers that do not support system drag-and-drop, simulated drag-and-drop is required.
Simulate drag-and-drop: Create an absolute positioning layer that can move with the mouse to make the user feel like using drag-and-drop. Set the drag-and-drop items and placement targets to absolute positioning. First, register the mousedown event on the drag-and-drop item, and then press the mouse over the drag-and-drop item, the mousedown event handler registers the mousemove and mouseup events on the body. When the mouse is released, that is, when the mouseup event occurs, if the dragged item is placed within the target boundary, the drag-and-drop items are positioned on the placement target, and the mousemove and mouseup events on the body are also deleted.
The mouse window coordinates are used: event. clientx/event. clienty; The offsetleft and offsettop of the drag-and-drop items; The offsetheight and offsetwidth of the target are placed. Directly paste the source code: Check that the operation is normal
<! Doctype HTML>
Drag and Drop instances in IE
