Drag event
Drag and drop event, you can control all aspects relating to drag and drop. One of the most critical is to determine the place where the incident occurred drag and drop. Some events are triggered in the dragged element, some event is triggered on the drop target. While dragging an element, which in turn triggers the following events: (1), dragstart events; (2), drag events; (3), dragend event.
Press the mouse button and moving the mouse to start when the event is triggered on dragstart dragged element. This time the cursor changes to "not put" symbol (a circle there backslash), that they can not put the elements on his door. When the drag start, you can run JavaScript code by ondragstart event handler.
Dragstart after the trigger event, then trigger the drag event, and during the element being dragged will continue to drag trigger event. This event is similar to mousemove and touchmove events. When dragging stops (regardless of the elements into an effective drop target, or put on an invalid drop target), dragend events will occur.
The above said target three events are triggered dragged element. By default, the browser will not change the appearance of being dragged during a drag element. But you can modify. However, most browsers will create a copy of a translucent element is being dragged, the copy always follow the cursor.
When an element is dragged to a valid drop target when the event triggers are: (1), dragenter events; (2), dragover event; (3), dragleave or drop event.
As long as there is an element to be dragged into the drop target will trigger dragenter event (similar to the mouseover event). It followed dragover event, but also within the scope of the dragged element is still placed in the target's movement is continuously triggered dragover event. If the element is dragged out of the drop target, dragover does not happen again, but it will trigger dragleave event (similar to mouseout event). If the element is placed into the drop target will trigger events rather than dragleave event. dragenter event, dragover events and dragleave or target drop events are as elements of the drop target.
Custom drop target
When dragging elements through some invalid drop target, you can see a special kind of mouse gestures (a backslash in the ring), that they can not be placed. Although all the elements to support the drop target events, but these elements are not allowed to be placed in default. If you drag the element after element is not allowed to place, regardless of the user how to operate, will not drop events. However, you can put any element becomes a valid drop target, the default behavior is to rewrite dragenter and dragover events.
After overwriting the default behavior it will be found that when a drag to move when the element is placed on the target, the cursor changes to allow placement of the sign. In Firefox 3.5+, the default behavior is to open the event to be placed into the url placed on the target. If the image is to be placed onto the target, the page will turn to the image file. If the text is dragged and dropped onto the drop target will result in an invalid url error. So to make Firefox support governance normal drag and drop, but also to cancel the default behavior of the drop event, preventing open the URL drag elements.
dataTransfer object
But only a simple drag and drop without data change is no use. In order to realize the data exchange during drag operation, IE5 introduced dataTransfer object, it is a property of the event object, for transmitting data from the format string dragged and dropped to the drop target element. Because it is a property of the event object, so the object can only be accessed in the event handler dataTransfer drag and drop event. In the event handler, you can use the object properties and methods to improve the drag and drop functionality, the draft HTML5 specification also income dataTransfer object.
dataTransfer object has two main methods: getData () and setData (). Not difficult to imagine, getData () can get setData () to save the first parameter value, setData () method, but also the getData () method only one parameter, a string that represents the saved data type, which 'text' or 'URL'.