Drag and Drop events

To support the drag effect of some elements on a webpage, you can use the drag and Drog events.

At present, ie 5.0+, Firefox 3.5+ support these events, the 5th version of the ECMA script formally incorporated into the standard.

For the dragged element, it will trigger the ondragstart and Ondrag events in turn and trigger the Ondragend event at the end of the drag and drop.

For drag-and-drop destination elements, it will trigger the Ondragenter,ondragover,ondrop event in turn, similar to the MouseOver class.

However, on the Web page, only the text box is the default as the drop target (that is, drag to display the kind of icon that can be placed, rather than the "invalid" mouse shape, that is, the middle of the circle with a bar).

Of course, you can add an Ondragenter,ondragover event to any element and block the default action, so the element can receive placement. At this point, your OnDrop event will be in effect.

Pay special attention here,

1) The OnDragEnter and OnDragOver functions must contain Event.preventdefault () to block the default action. Below is the original version of Mozilla:

"If the mouse was released-a element that's a valid drop target, that's, one that cancelled the last dragenter or dragoverevent, then the drop would be successful, and a event would fire at the drop target. Otherwise, the drag operation is cancelled and no drop event is fired. "

Https://developer.mozilla.org/En/DragDrop/Drag_Operations#drop

2) This ondrop effect I tried for a long time today, has not been successful, because I use return false to replace the Preventdefault. In fact, it's not right.

return false to achieve the effects of Preventdefault and stoppropogation. Would preventDefault prevent the default event from occuring ( cancels the behavior of the event), would prevent the event from stopPropogation bubbling return false up and Will does both (this method stops the propagation of the event and prevents it from being dispatched to other Document nodes.) It can be called at any stage of event propagation. Note that although this method does not prevent other event handles on the same Document node from being called, it can prevent events from being dispatched to other nodes. ).

Therefore, return false cannot be used in the OnDragEnter and OnDragOver functions.

3) In addition, the browser itself has the default effect of dragging, so do not use return false in Ondragstart, etc., which prevents the default effect of dragging.

4) When your function is to return a Boolean, here is a more comprehensive notation:

function(EventObject) {
If(Eventobject.preventdefault) {
Eventobject.preventdefault ();
}else if (window.event)/ * for IE */ {
Window.event.returnValue = false;
}
return true;
};

Drag and Drop events