Slide 15
Slide 15 text
// What are we draggin’?
var draggedElement;
var onDragStart = function(e) {
// Keep track of the draggable
draggedElement = this;
e.originalEvent.dataTransfer.setData('text/html', this.innerHTML);
}
var onDrop = function(e) {
// Change places!
$(draggedElement).html( $(this).html() );
// Pull out the transferred data
$(this).html( e.originalEvent.dataTransfer.getData('text/html') );
}
$('body')
.on('drop', '[data-behaviour~="droppable"]', onDrop)
.on('dragstart', '[draggable]', onDragStart);
Friday, 25 May 12
* `dataTransfer` object is the secret.
* Lets you transfer data around.
* A setData and getData function.
* setData takes two arguments, a data type, and then the data itself.
* In the drop event we get access to that same dataTransfer object.