Web Development with jQuery®

Implementing Drag and Drop (^) ❘ 285
.on(
'dragleave.finder',
function(event)
{
event.preventDefault();
event.stopPropagation();
$(this).removeClass('finderDirectoryDrop');
}
)
.on(
'drop.finder',
function(event)
{
event.preventDefault();
event.stopPropagation();
var dataTransfer = event.originalEvent.dataTransfer;
try
{
var html = dataTransfer.getData('text/html');
}
catch (error)
{
var html = dataTransfer.getData('Text');
}
html = $(html);
var drop = $(this);
var dontAcceptTheDrop = (
drop.data('path') == html.data('path') ||
drop.is('div.finderFile')
);
if (dontAcceptTheDrop)
{
// Prevent file from being dragged onto itself
drop.removeClass('finderDirectoryDrop');
return;
}
if (html.hasClass('finderDirectory finderFile'))
{
// Do something with the dropped file
console.log(html);
}
}
);
}
);
Figure 11-1 shows the preceding example results.
http://www.it-ebooks.info