Implementing Drag and Drop (^) ❘ 293
.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);
}
}
);
The drop event listener continues with assigning the dataTransfer object from event.originalEvent.
dataTransfer to dataTransfer, which is done to keep the code from getting too wide. The HTML
that was copied to the system clipboard under the text/html MIME type during the dragstart event
is retrieved from the system clipboard using the getData() method and the same MIME type, text/
html. The HTML comes from the clipboard as plain text and is assigned to the html variable. The
html variable is converted into a DOM object that jQuery can work with by passing the HTML
snippet to the jQuery method, $(html). This makes it possible to do things with the
retrieved from the system clipboard using jQuery methods.
Another try / catch exception is used on the getData() method to differentiate between Internet
Explorer’s method of retrieving data from the clipboard and the standard way of retrieving data
from the clipboard. As you did with setData(), IE requires just 'Text' instead of a MIME type to
http://www.it-ebooks.info