Remove Item from Sortable
Hi all together!
I have sth like a shopping card where I can drag & drop items from a draggable on a sortable by cloning the items.
- $(function() {
$(".sortable").sortable({
revert: true,
connectWith: 'ul',
remove: function() {alert($(this).position)}
});
$("#draggable > li").draggable({
connectToSortable: '.sortable',
helper: 'clone',
revert: 'invalid',
});
});
- <div class="demo">
<ul id="draggable">
<li class="ui-state-highlight">Article 1</li>
<li class="ui-state-highlight">Article 2</li>
</ul>
<ul id="sortable" class="sortable">
</ul>
</div>
Now I try to realize that one can remove an item from a Sortable by dragging it just out of the list on a droppable. For the beginning its just okay, if it would work that some alert is coming up when the item from the Sortable is dropped on the droppable:
- $(function() {
$(".sortable").sortable({
revert: true,
connectWith: 'ul',
remove: function() {alert($(this).position)}
});
$("#draggable > li").draggable({
connectToSortable: '.sortable',
helper: 'clone',
revert: 'invalid',
});
$("#droppable").droppable({
drop: function() {
alert('ok');
}
});
});
- <div class="demo">
<ul id="draggable">
<li class="ui-state-highlight">Article 1</li>
<li class="ui-state-highlight">Article 2</li>
</ul>
<ul id="sortable" class="sortable">
</ul>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</div>
Why doesn't this work?
I have also tried to make a simple "Link for deleting the item" with an effect instead by adding this:
$("a").click(function(){
$(this).parent.hide("slow");
return false;
});
But it also does not work.
Any ideas?