(^318) ❘ CHAPTER 11 HTML5 DRAG AND DROP
catch (error)
{
var html = dataTransfer.getData('Text');
}
html = $(html);
Other than fi le uploads by drag and drop, the drop event listener works the same as it did in
Example 11-1.
Along with the drag-and-drop events that are applied to each fi le and folder object, a new collection
of drag-and-drop events are also applied to the
element with id name finderFiles, which is
the folder view taking up nearly all the browser window that holds all the fi le and folder elements.
This
the folder view taking up nearly all the browser window that holds all the fi le and folder elements.
This
element receives dragenter, dragover, and dragleave events that are identical to the
dragenter, dragover, and dragleave events already placed on
dragenter, dragover, and dragleave events already placed on
elements with classnames
finderFile or finderDirectory. This leaves the drop event, which is slightly different.
.on(
'drop.finder',
function(event)
{
event.preventDefault();
event.stopPropagation();
var dataTransfer = event.originalEvent.dataTransfer;
var drop = $(this);
As you did with the other drop event, check that the files property has a length greater than zero,
which lets your application know that the user has dropped fi les onto the browser window.
if (dataTransfer.files && dataTransfer.files.length)
{
dragAndDrop.openProgressDialogue(
dataTransfer.files,
drop.data('path')
);
}
else
{
try
{
var html = dataTransfer.getData('text/html');
}
catch (error)
{
var html = dataTransfer.getData('Text');
}
html = $(html);
You also make sure that the folder isn’t dropped on itself:
if (drop.data('path') == html.data('path'))
{
http://www.it-ebooks.info
finderFile or finderDirectory. This leaves the drop event, which is slightly different.
.on(
'drop.finder',
function(event)
{
event.preventDefault();
event.stopPropagation();
var dataTransfer = event.originalEvent.dataTransfer;
var drop = $(this);
As you did with the other drop event, check that the files property has a length greater than zero,
which lets your application know that the user has dropped fi les onto the browser window.
if (dataTransfer.files && dataTransfer.files.length)
{
dragAndDrop.openProgressDialogue(
dataTransfer.files,
drop.data('path')
);
}
else
{
try
{
var html = dataTransfer.getData('text/html');
}
catch (error)
{
var html = dataTransfer.getData('Text');
}
html = $(html);
You also make sure that the folder isn’t dropped on itself:
if (drop.data('path') == html.data('path'))
{
http://www.it-ebooks.info