Question

I have a jQuery-UI “sortable” list of items. I want to drop an element from this list elsewhere on the page.

To be specific, it’s a CMS. I can reorder content items with jQuery.ui.sortable. I want to drag & drop an element one of those items on the “recycle bin” link, elsewhere on the page.

How can I execute a specific action when I drop a draggable element on a specific element of the page ? How can I get the item on wich I have dropped an item ?

Thanks

Answer 1

I have a similar situation, but I’ve setup a <div> for my recycle bin and have made it a connected list. Here is my script:

$('#rubbishBin').sortable({
    placeholder: 'deletingPlaceholder',
    update: function (event, ui) {
        ui.item.hide();
        // Do what you need to to delete the item from the database
    }
});
$('#itemContainer').sortable({
    opacity: 0.6,
    cursor: 'move',
    revert: true,
    delay: 250,
    tolerance: 'intersect',
    placeholder: 'draggingPlaceholder',
    connectWith: '#rubbishBin'
});