CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-sortable
agis
agis

Reputation: 1841

jquery sortable ui remove item when is dragged to a specific div

I'm using jQuery sortable plugin

I have two blocks connected one is draggable and the other is only sortable.

What I want to do is when I'm dragging an item from the sortable in to a specific div to remove it.

Here's the markup: 

  <div>Draggable source items
    <ul>
        <li class="draggable" class="ui-state-highlight">Drag me down</li>
        <li class="draggable" class="ui-state-highlight">Drag me down 2</li>
        <li class="draggable" class="ui-state-highlight">Drag me down 2</li>

    </ul>
</div>

<div>Sortable List 1
    <ul class="sortableList">

    </ul>
</div>

<div class="test">
     <!--IF YOU DRAG THE ITEM fROM THE SORTABLE LIST HERE IT WILL REMOVE IT -->
</div>

JS:

   (document).ready(function () {
    $(".sortableList").sortable({
        revert: true,
        /*update: function (event, ui) {
            // Some code to prevent duplicates
        }*/
    });
    $(".draggable").draggable({
        connectToSortable: '.sortableList',
        cursor: 'pointer',
        helper: 'clone',
        revert: 'invalid'
    });
});

Here is a jsfiddle

Upvotes: 0

Views: 1657

Answers (1)

A. Wheatman
A. Wheatman

Reputation: 6378

how about this?

$('.droppableArea').droppable({
    accept: 'li',
    drop: function(event, ui) {
        ui.helper.remove();
    }
});

I marked your droppable DIV with 'droppableArea' class. See fiddle for details.

Upvotes: 1

Related Questions