Native Drag Drop HTML5

Drag event (DragStart--drag--Dragend)

When you press the mouse to start drag an object that can be dragged, trigger the DragStart event, if the element is not draggable, there will be a non-draggable icon, a slash inside the ring DragStart event triggered, when you drag the element, it will continue to trigger the drag event, The Dragend event is triggered until you let go.put down (dragenter--dragover--Dragleave/drop)When the dragged element enters a valid drop area, the DragEnter event is triggered immediately, and the DragOver event is triggered when the element is moved within the active drop area, triggering the DragLeave if the element is finally dragged out. If you put the element down at the end, it triggers the drop event.Customizing the drop target areaAll elements can be set to the drop target, which is not allowed by default, as long as the default behavior of the DragEnter and DragOver events is forbidden to set the element to the drop target area <div id= "Target" ></div >var droptarget = document.getElementById ("DropTarget"); Eventutil.addhandler (Target, "DragOver", function (event) {Eventutil.preventdefault (event);}); Eventutil.addhandler (Target, "DragEnter", function (event) {Eventutil.preventdefault (event);}); The default behavior of firefox3.5+ is to go to the URL of the dragged element, or if you drag a picture, the structure is to go to the picture URL. The default behavior of the drop event needs to be suppressed: Eventutil.addhandler (DropTarget, "Drop", function (event) {Eventutil.preventdefault (event);});Transfer data (DataTransfer object):When you start to drag, the data will be saved to the datatransfer, for example, drag a piece of text, then call the SetData method to save the text in the text format, drag the picture will be in the format of the URL to save the data.                           Event.dataTransfer.setData ("text", "some text"); Working with text
var text = event.dataTransfer.getData ("text");

Event.dataTransfer.setData ("URL", "http://www.wrox.com/"); Working with a URL (image)
var url = event.dataTransfer.getData ("url"); This is the beginning of IE allows the two types, later HTML5 extended, allowing all MIME types, datatransfer data only in the drop event can be obtained, If the object is not taken, it will be destroyed.(Compatibility:var datatransfer = Event.datatransfer;var url = datatransfer.getdata ("url") | |    Datatransfer.getdata ("Text/uri-list"); Until IE10 does not support the extension name, so put the URL in front, back text/uri-list is supported firefoxvar text = Datatransfer.getdata ("text");)DataTransferyou can control what action is taken on the dragged element and the drop target:For the drop target element setting the DragEnter event, the Event.dataTransfer.dropEffect setting value can change the icon on the mouse when dragged in: "None"-A dragged item cannot be dropped Here. The default value for everything except text boxes. Move "-the dragged item should is moved to the drop target." Copy "-the dragged item should is copied to the drop target." Link "-indicates that the drop target would navigate to the dragged item (yet only if it is a URL). Also needs to be set in the DragStart mate  event.datatransfer.effectallowed, this property specifies which drop effect is allowed for the dragged element: "Uninitialized"-no action has been set for the Dragged item. " None "-no action is allowed on the dragged item." Copy "-only dropeffect" copy "is allowed." Link "-only dropeffect" link "is allowed." Move "-only dropeffect" move "is allowed." Copylink "-dropeffect" copy "and" link "are allowed." Copymove "-dropeffect" copy "and" move "are allowed." Linkmove "-dropeffect" link "and" move "are allowed." All "-all dropeffectvalues is Allowed. datatransfer objects also have some methods: cleardata (format)   to clear out the data in a particular format setdragimage ( Element, x, y)     Customize the icon under the mouse when dragging  setting elements can be drag:Default picture, connection, text is drag, HTML5 provides a draggable property <!--turn off dragging for this image--><!--turn on dragging for this element--><div draggable= "true" >...</div > (compatibility: Internet Explorer 9 and earlier allow you to do any element draggable by calling the DragDrop () method on it during the Mousedownevent. Safari 4 and earlier required the addition of a CSS Style–khtml-user-drag:elementto make an element draggable.)

Native Drag Drop HTML5