Implementing Drag-and-Drop File Uploads (^) ❘ 299
bottom: 5px;
left: 5px;
border: 1px solid rgb(222, 222, 222);
}
div#finderDragAndDropDialogueFiles table th {
background: rgb(233, 233, 233);
border: 1px solid rgb(222, 222, 222);
text-align: left;
padding: 5px;
}
div#finderDragAndDropDialogueFiles table td {
padding: 5px;
border-left: 1px solid rgb(222, 222, 222);
border-right: 1px solid rgb(222, 222, 222);
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}
td.finderDragAndDropDialogueFileIcon img {
max-height: 100px;
}
The CSS is saved as Example 11-2.css. Finally, the following script and on the following pages com-
pletes the HTML drag-and-drop API demo:
$.fn.extend({
outerHTML : function()
{
var temporary = $("
var html = temporary.html();
temporary.remove();
return html;
},
enableDragAndDrop : function()
{
return this.each(
function()
{
if (typeof this.style.WebkitUserDrag != 'undefined')
{
this.style.WebkitUserDrag = 'element';
}
if (typeof this.draggable != 'undefined')
{
this.draggable = true;
}
if (typeof this.dragDrop == 'function')
{
this.dragDrop();
http://www.it-ebooks.info