Drag and drop is a common feature, that is, drag to another position after the capture object.
In HTML5, drag and drop is a standard part, and any element can be dragged and dropped.
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support dragging.
Note: Safari 5.1.2 does not support drag.Example:
<! Doctype html> <html> <head> <Title> Drag and drop </title> <Style Type = Text/CSS> #DIV1 {Width: 360px; Height: 220px; Padding: 1px Solid Bl ACK;} </style> <Script> Function Alowdrop (EV) {EV.PreventDefault ();} Function Drag (EV) {EV.DATATRANSFER.SETDATA (text, evraget.id);} Function OP (EV) {EV. Preventdefault (); var data = EV.DATATRANSFER.GetData (text); Ev.Target.appendchild (Document.GetelementByid (data)); v ID = DIV1 ONDROP = Drop (EVENT) ONDRAGOVER = Allowdrop (Event)> </DIV> <IMG ID = DRAG1 SRC = IMG/BG_1.jpg Draggable = TRUE ONDRAGSTART = DRAG (Event) Width = 300px Heig ht = 180px /> < /body > </html>First of all, in order to make the element be dragged, set the Draggable property to true: <IMG DRAGGABLE = TRUE>
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.
The 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 ()
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 (documeCode 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)
Drag back and forth:If you want to drag back and forth in two places, just modify the above code.
Change the code in the body:
<body> <div ID = div1 onDrop = Drop (event) onDragover = Allowdrop (EVENT)> <IMG ID = DRAG1 SRC = IMG/BG_1.jpg Draggable = TRUE vent) width = 300px height = 180px /> </div> <div ID = div2 onDrop = Drop (event) onDragover = Allowdrop (Event)> </DIV> </Body>
Then add#DIV2 to the style style:
<STYLE TYPE = Text/CSS> #DIV1, #DIV2 {Width: 360px; Height: 220px; Padding: 20px; Border: 1px Solid Black;} </style>This can be dragged back and forth.
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.