Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.
Note: Do not support drags in Safari 5.1.2. HTML5 drag and drop instance <! Doctype html> <html> <wead> <Style Type = Text/CSS> #DIV1 {Width: 488px; Height: 70px; Padding: 10px; 1px solid #aaaaaa;} </style> <script type = Text/Javascript> Function Allowdrop (EV) {Ev.preventDefault ();} Function Drag (EV) {EV.DATATRANSFER.SETDATA (Text, EV.TARGET.ID); Rop (EV) {EV.PreventDefault () ; Var Data = EV.DATATRANSFER.GetData (text); Ev.Target.appendchild (Document.GetelementByid (data));} </script> </head> <p> Drag and drop到矩形中：p> <div id=div1 ondrop=drop(event) ondragover=allowDrop(event)>div> <br /> <img id=drag1 src=http://www.aseoe.com/statics/images /eoe/logo.png draggable = true onDragStart = DRAG (EVENT)/> </Body> </html> Set the element to drag and dropFirst of all, in order to make the element be dragged, set the DRAGGABLE property to true:
What to drag-ondragstart and setdata ()It is then specified what happens when the element is dragged.
In the above example, the ONDRAGSTART property calls a function, DRAG (Event), which specifies the dragged data.
DATATRANSFER.SETDATA () method Set the data type and value of the data dragging data:
Function drag (EV) {EV.DATATRANSFER.SETDATA (Text, EV.TARGET.ID);}In this example, the data type is Text, and the value is ID (DRAG1) that can drag the element.
Where to put it-ONDRAGOVERThe ONDRAGOVER event stipulates where to place the dragged data.
Default, data/elements cannot be placed in other elements. If you need to set the allowable placement, we must prevent the default processing of elements.
This is to call the Event.preventDefault () method of the ONDRAGOVER event::):
event.preventdefault ()Putting-ONDROP
When the dragging data is placed, the Drop event occurs.
In the above example, the ONDROP attribute calls a function, Drop (Event):
Function drop (EV) {EV.PreventDefault (); VAR DATA = EV.DATATRANSFER.GetData (text); Ev.Target.appendchild (docume Code explanation:Call the preventdeFault () to avoid the browser's default processing of the data (the default behavior of the Drop event is opened in a link)
Get the dragged data through the DataTRANSFER.GetData (text) method. This method will return to any data of the same type in the setdata () method.
Drag data is the ID of the dragging element (DRAG1)
Additional drag element to the placement element (target element)
SummarizeThe above is all the contents of this article. I hope the content of this article can help you learn or use HTML5. If you have any questions, you can leave a message to communicate. Thank you for your support for VEVB Wulin.com.