CODEWITHSUNDEEP
jquery-uidrag-and-dropjquery-draggablejquery-droppable
Shaakir
Shaakir

Reputation: 484

Multiple droppable divs

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 ???

Upvotes: 0

Views: 749

Answers (1)

Rickkwa
Rickkwa

Reputation: 2291

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');

Check out the Fiddle

Upvotes: 1

Related Questions