I have setup a list of contact in list of categories...
http://jsfiddle.net/dalkill/ny7qeep6/2/
<div class='category_snap_to_target green'>
<div class='contact_draggable'>
blah blah1
</div>
<div class='contact_draggable'>
blah blah2
</div>
</div>
<div class='category_snap_to_target yellow'>
<div class='contact_draggable'>
blah blah3
</div>
<div class='contact_draggable '>
blah blah4
</div>
</div>
<div class='category_snap_to_target red'>
<div class='contact_draggable'>
blah blah5
</div>
<div class='contact_draggable'>
blah blah6
</div>
</div>
<div class='category_snap_to_target blue'>
</div>
<style>
.blue { background-color: blue }
.red { background-color: red }
.green { background-color: green }
.yellow { background-color: yellow }
</style>
<script>
$(function() {
$( '.contact_draggable' ).draggable();
$('.category_snap_to_target').droppable({
accept: '.contact_draggable',
drop: function(event, ui){
$(this).append($( ui.draggable ));
$( ui.draggable ).css('position', '');
}
});
});
</script>
user can contact and drop in another category... however after the first drag and contact div looses the ability to show show the helper...
it still drags and drops fine... but on second attempt to move same contact div it looses it's helper functionality . still drags and drops but no visual indication to user.
also i had to add $( ui.draggable ).css('position', ''); to make the "append" function work nicely by appending the contact div into the category div . without it, the contact div stays where you last leave it with mouse, and does not snap into place below the last contact in that category ???
You need the position: relative for the visual indication. Instead of setting position: '', you can set left: auto and top:auto.
$( ui.draggable ).css('left', 'auto');
$( ui.draggable ).css('top', 'auto');