Web Development with jQuery®

(^290) ❘ CHAPTER 11 HTML5 DRAG AND DROP

1. dragenter


2. dragover


3. drop or dragleave

Most of the drag-and-drop events require either event.preventDefault(), or event.stopPropagation(),

or both, to block either the default action or to prevent the event from propagating up the DOM tree.

The dragstart event sets the contents of the operating system’s drag-and-drop clipboard. It also pro-

vides an opportunity to set the effectAllowed property. The effectAllowed property does little more

than change the mouse cursor to give the user an indication of what’s possible when dragging an ele-

ment. Because you’re working with fi les and folders, the effectAllowed that makes the most sense is

'copyMove'.

$('div.finderDirectory, div.finderFile')

.on(

'dragstart.finder',

function(event)

{

event.stopPropagation();

var html = $(this).outerHTML();

var dataTransfer = event.originalEvent.dataTransfer;

dataTransfer.effectAllowed = 'copyMove';

try

{

dataTransfer.setData('text/html', html);

dataTransfer.setData('text/plain', html);

}

catch (error)

{

dataTransfer.setData('Text', html);

}

}

)

The possible values of the effectAllowed property follow:

➤ (^) none—No operation by drag and drop is permitted.
➤ (^) copy—Only copy by drag and drop is permitted.
➤ (^) move—Only move by drag and drop is permitted.
➤ (^) link—Only link by drag and drop is permitted.
➤ (^) copyMove—Both copy and move are permitted.
➤ (^) copyLink—Both copy and link are permitted.
➤ (^) linkMove—Both link and move are permitted.
➤ (^) all—Copy, link, and move are all permitted.
http://www.it-ebooks.info