Summary (^) ❘ 319
// Prevent file from being dragged onto itself
drop.removeClass('finderDirectoryDrop');
return;
}
You make sure that the dropped HTML has the finderDirectory and finderFile class names:
if (!html.hasClass('finderDirectory finderFile'))
{
return;
}
Finally, check that any fi le or folder dropped onto the directory doesn’t already exist in the directory
by examining each of the fi lenames in that directory locally. In this example, the application simply
stops when it detects a duplicate fi le locally. Another approach is upon detecting a duplicate fi le, you
ask users if they wants to replace the duplicate fi le; then you pass that selection onto the server side,
which should also perform validation for existing fi les or folders. In addition, the same duplicate
fi lename check should be done for drag-and-drop fi le uploads. I have removed the extra validation in
the interest of keeping the script shorter and more to the point.
var fileExists = false;
$('div.finderFile, div.finderDirectory').each(
function()
{
if ($(this).data('path') == html.data('path'))
{
fileExists = true;
return false;
}
}
);
If the fi le or folder does not already exist, you would do something with the dropped
HTML here.
if (!fileExists)
{
dragAndDrop.applyEvents(html);
drop.append(html);
}
}
}
);
Summary
In this chapter you learned how to use jQuery to leverage the HTML5 drag-and-drop API. You
implemented the drag-and-drop API using the CSS property –webkit-user-drag, the draggable
HTML attribute, and the legacy dragDrop() method. You also learned how to implement the drag-
and-drop API in JavaScript by virtue of attaching listeners to the following events: dragstart, drag,
dragend, dragenter, dragover, drop, and dragleave.