(^292) ❘ CHAPTER 11 HTML5 DRAG AND DROP
true within the dragstart event listener. Other options are the Control key, event.ctrlKey, the Shift
key, event.shiftKey, or the Command/Windows key, event.metaKey.
The next event attached is the dragenter event:
.on(
'dragenter.finder',
function(event)
{
event.preventDefault();
event.stopPropagation();
}
)
The action taken for the dragenter event is simply to prevent the default action and to stop event
propagation. The action taken for the dragover event is similar:
.on(
'dragover.finder',
function(event)
{
event.preventDefault();
event.stopPropagation();
if ($(this).is('div.finderDirectory'))
{
$(this).addClass('finderDirectoryDrop');
}
}
)
The dragover event also requires canceling the default action and stopping event propagation. In
addition, if the element is a
derDirectoryDrop is added, which changes the icon used for the directory from a closed folder to an
open folder.
Likewise, the dragleave event also cancels the default action and stops event propagation:
.on(
'dragleave.finder',
function(event)
{
event.preventDefault();
event.stopPropagation();
$(this).removeClass('finderDirectoryDrop');
}
)
Then the classname finderDirectoryDrop is removed from the
the dragging element is no longer over this element.
Finally, the drop event is applied, and it also begins with preventing the default action and stopping
event propagation:
http://www.it-ebooks.info