Today I want to use jquery to implement the div drag-and-drop function

HTML5 tags. Drag-and-drop (Drag and Drop) is part of the HTML5 standard.

Step one: First set the label can be dragged Draggable= "true"
Step two: Select the tag to be dragged, and the container label to place the dragged label.
Step three: The input box can receive text by default, but the DIV is refusing to receive everything, all at this point remember to block the default behavior of the Div.

Drag-and-drop label-owned event DragStart event Drag event Dragend event

Events that are owned by the placed label

1. DragEnter Event (drag and drop target in)
2. DragOver event (the target tag moves inside)
3. If removing the placement label will depart DragLeave event
4. The drop event is triggered by placing the drag-and-drop label inside the placement label.

Attention

1. Each tag has a data type that can be received is the default behavior that needs to be blocked in the DragOver event
2. Firefox browser Shanghai needs to block his default behavior in DragEnter events Event.preventdefault
3. The data represented by different labels is also different from the A-tag href address

Set the dragged data by the Event.dataTransfer.setData () method in the drag-and-drop label DragStart event

Set the type of data received by the Event.dataTransfer.getData (' text ') method in the drop event of the drop zone

Drag the div to start the trigger Img.addeventlistener (' DragStart ', function (event) {Console.log (1); Event.dataTransfer.setData (' Text ', Event.target.id),}, False);//during drag-and-drop, the drag event//Div.addeventlistener is continuously triggered (' Drag ', function () {///Console.log (' drag '),//}, FALSE);//drag and drop, trigger Dragend event Div.addeventlistener (' Dragend ', function () {console.log (' dragend ');}, false);//For placed tags, the events that are owned//if there is a tag that is being dragged into this tag, trigger the DragEnter event Big.addeventlistener ( ' DragEnter ', function () {console.log (' dragenter ');//Firefox will block its default behavior when it starts to enter}, false); Big.addeventlistener (' DragOver ', function (event) {Event.preventdefault ();//block default behavior: Div is default to not accept things console.log (' DragOver ');}, false);//If the placement label is removed,    Trigger DragLeave Event Big.addeventlistener (' DragLeave ', function (event) {Event.preventdefault (); Console.log (' DragLeave ');}, false);//If the drag-and-drop label is placed in the placement label, the drop event of the tag is triggered Big.addeventlistener (' drop ', function (event) {/    /Console.log (' drop ');    big.innerhtml = big.innerhtml + event.dataTransfer.getData (' jpg '); Event.preventdefault ();   var data=event.datatransfer.getdata ("Text"); Event.target.appendChild (document.getElementById (data));}, False);d Iv.addeventlistener (' Drop ', function (event) {/    /Console.log (' drop ');    big.innerhtml = big.innerhtml + event.dataTransfer.getData (' jpg ');    Event.preventdefault ();    var data=event.datatransfer.getdata ("Text"); Event.target.appendChild (document.getElementById (data));}, False);

　　

Today I want to use jquery to implement the div drag-and-drop function