Web Development with jQuery®

(^334) ❘ CHAPTER 12 DRAGGABLE AND DROPPABLE
$('div.finderIconSelected')
.removeClass('finderIconSelected');
$('span.finderDirectoryNameSelected')
.removeClass('finderDirectoryNameSelected');
$(this).find('div.finderIcon')
.addClass('finderIconSelected');
$(this).find('div.finderDirectoryName span')
.addClass('finderDirectoryNameSelected');
}
)
.draggable({
helper : 'clone',
opacity : 0.5
})
.droppable({
accept: 'div.finderDirectory',
hoverClass: 'finderDirectoryDrop',
drop: function(event, ui)
{
var path = ui.draggable.data('path');
// Do something with the path
// For example, make an AJAX call to the server
// where the logic for actually moving the file or folder
// to the new folder would take place
// Remove the element that was dropped.
ui.draggable.remove();
}
});
}
);
The preceding source code gives you output in Safari on Mac OS X, as shown in Figure 12-2.

FIGURE 12-2

http://www.it-ebooks.info