First, function opening

If you want to drag someone, you add draggable="true"To enable element drag and drop (except firefox)Copy the code

Ii. Information Transmission:

event.dataTransfer.setData("key",value); Two arguments. Note that you can only pass strings and urls, but new tabs open when Firefox uses text or text as keys, so don't use them as keys.Copy the code

Ii. Events:

  • 1. Drag element events
  • 2. The receive event for the location of the element to be placed

Note: The drop event is triggered only if the dragover event is setCopy the code
Note: When you drag and release the mouse, the onDragover event is triggered first and then the onDrop event is triggered, but the default action in ondragover (like the default jump action for the <a> tag) may prevent the onDrop event from happening (it's not clear why). Call event.preventDefault (when onDragover event is triggered, the trigger function will be executed before the default action takes place) to prevent the default action.Copy the code
$('.container').ondrop = function() {} $('.container').addEventListenner('drop'.function(){}) Register listener, corresponding to removeEvenListenerCopy the code