Chapter 13: Drag and Drop

how do we pass data between the dragstart and drop events?

DataTransfer object

File API

allows dragging and dropping files in HTML5, provides indirect access to files in a tightly controlled manner

What browsers does drag and drop work in for HTML5?

drag and drop is consistent and compatible across all browsers

what must be coded to prevent the default operation and enable dropping?

dragenter and dragover

drop events

dragenter: drag enters the drop zone dragover: triggers continuously while drag in over drop zone dragleave: triggers when dragged item leaves the drop zone drop: triggered when dragged item is dropped

how do you change the style of the element being dragged?

dragstart and dragend

dragged element events

dragstart, drag (continuously fires during), dragend

no-entry symbol

indicates that an element cannot be dropped while dragging

File List object

name (file.mp3), type (MIME type of file), size (bytes)

default drag and drop behavior for files?

open whatever was dragged and dropped in a new window

how do i make an element draggable?

set the draggable attribute to true on each element that needs to be draggable

what data can the DataTransfer object contain?

string or url

what ever triggers when the item is dropped on a drop target?

the drop event

what happens to the DOM/HTML when an item is dragged and dropped?

the drop event removes the item from the DOM and adds it back in it's new location $('.hole').on('drop', dropItem); function dropItem(e) { var hole = $(e.target); if (hole.hasClass('hole') && hole.children().length == 0) { $draggedItem.detach(); $draggedItem.appendTo($(e.target)); } }

draggable attribute options

true, false, auto (default)