Mainly HTML5 drag and drop (Drag and drop)
Example (do not need to set the ID for div):
<!DOCTYPE HTML> <HTML> <Head> <Scripttype= "Text/javascript"> functionAllowDrop (EV) {ev.preventdefault (); } varSrcdiv= NULL; functionDrag (ev,divdom) {Srcdiv=Divdom; Ev.dataTransfer.setData ("text/html", divdom.innerhtml); } functionDrop (ev,divdom) {ev.preventdefault (); if(Srcdiv!=divdom) {srcdiv.innerhtml=divdom.innerhtml; Divdom.innerhtml=Ev.dataTransfer.getData ("text/html"); } } </Script> </Head> <Body> <Divstyle= "width:50px;height:50px;"OnDrop= "Drop (event,this)"OnDragOver= "AllowDrop (event)"draggable= "true"ondragstart= "Drag (event, this)">div1!</Div> <Divstyle= "width:50px;height:50px;"OnDrop= "Drop (event,this)"OnDragOver= "AllowDrop (event)"draggable= "true"ondragstart= "Drag (event, this)">div2! </Div> <Divstyle= "width:50px;height:50px;"OnDrop= "Drop (event,this)"OnDragOver= "AllowDrop (event)"draggable= "true"ondragstart= "Drag (event, this)">Div3</Div> </Body> </HTML>
The above function describes:
- OnDrop: Drop event occurs when drop data is placed, custom drop (event,this) function, swap two innerHTML
- OnDragOver: When dragging a link and other elements with a default event, the default event is blocked with Ev.preventdefault () in the OnDragOver event. Otherwise, the drop event does not fire.
- Draggable: Allow dragging.
- Ondragstart: Specifies what happens when the element is dragged. In the example above, the Ondragstart property invokes a function, drag (event), which specifies the data to be dragged. The Datatransfer.setdata () method sets the data type and value of the dragged data.
-----Please refer to W3cschool:HTML5 drag and Drop
This is the record of their own learning process, to facilitate their own review, good memory is not as bad as written
Art to
JS implementation of Div block drag and drop, swap position