@(HTML5)[HTML 5 drag]

[TOC]

HTML 5 drag and drop

HTML 5 Drag events

Draggable: true Draggable element (dragged element) Event:

  • Ondragstart: triggered at the moment of drag
  • Ondrag: Trigger continuously before drag and after drag
  • Ondragend: Trigger of dragend

The target element (where the drag element is dragged) event:

  • Ondragenter: Trigger into the target element
  • Ondragover: Trigger continuously between entering target and leaving target
  • Ondragleave: Trigger to leave the target element
  • Ondrop: Releases the mouse trigger on the target elementBy default, one element cannot be placed on top of another. You need to block the default event in the onDragover event IE didn't effect

Lifecycle: DragStart -> drag -> Dragenter -> dragover -> DragLeave -> drop -> dragend

Compatibility under Firefox

In firefox, you need to set the dataTransfer object to drag and drop labels other than images

  • The dataTransfer object
  • SetData () : Sets data key and value(must be strings)
  • GetData () : getData() : retrieves the data according to the key value
  • Effectalhoward: Set cursor styles (None, copy, copyLink, copyMove, Link, linkMove, move, all, and uninitialized)
  • SetDragImage: three arguments (specified element, coordinate X, coordinate Y)
  • Files: Get external drag files, return a filesList list
  • FilesList has a type attribute that returns the type of the file

FileReader(Read file information)

readAsDataURL

  • The argument is the file object to read
  • Onload Raises this event when reading the file completes successfully
  • This.result gets the file data read