Remove item and avoid duplicates in sortable list jQuery

Question

I am using draggable list and sortable list in jQuery. My requirement is

Need to drag items from draggable list to sortable list.
remove the items in sortable list if needed, by dragging it out.
Sortable list should not allow duplicate values to be dropped into it.

So I have come up with the logic to revert the item to draggable list if its already present in sortable list and to remove the items from sortable list. Please see the fiddle http://jsfiddle.net/xDGUD/

Issue: Steps to replicate the issue

Setp 1: Drag "Item1" into sortable list
Step 2: Drag "item1" from sortable list and pull it out so that it will be removed
Step 3: Again drag "Item1" from draggable list to sortable list

We will notice, item1 will revert back to draggable list and at same time we will get item1 in sortable list.

I want item to go into sortable list after step 3 and revert back only if it already present.

HTML

<div class="leftDiv">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
<div class="item item6">Item 6</div>
</div>
<div class="rightDiv">
</div>

simple fix using start event of draggable elment, should have better workaround i guess: jsfiddle.net/xDGUD/1 — A. Wolff
@A.Wolff please consider adding an answer with some explanation or the question will stay un-answered forever. — T J

praveen praveen · Accepted Answer · 2014-07-10T17:40:55

Best answer for the above question is . http://jsfiddle.net/xDGUD/1/

start: function (ev) {
var clazz = getClassNameWithNumberSuffix(ev.target);
 if ($('.rightDiv .' + clazz).length) 
$(ev.target).draggable("option", "revert", true);
else $(ev.target).draggable("option", "revert", false);
},

Remove item and avoid duplicates in sortable list jQuery

1 Answers