Question

I have implemented a drag & drop feature using JQuery UI – my current code is provided below:

My JavaScript function receives JSON array from PHP and then uses a loop to create the draggable elements:

<script type="text/javascript">
    function init() {
        var items = <?php echo $result_j;?>; //items is an one dimensional array

        for ( var i=0; i<<?php echo $total_rows_j;?>; i++ ) {      
            $('<div>' + items[i] + '</div>').data( 'item_name', items[i] ).attr( 'class', 'snk_button' ).appendTo( '#drag' );
         }

With the ‘items’ array I have created several div elements (above code) which I then turn into draggable elements (code below).

         $(".snk_button").draggable( {
            containment: '#drag_section',//Div #drag_section contains the Div #drag 
            stack: '#drag div',
            cursor: 'move',
            revert: true
         } )

Below is my droppable code:

$( "#dropp" ).droppable(
   drop: handleDrop
});

function handleDrop( event, ui ) {
    ui.draggable.draggable( 'option', 'revert', false );
} // End function handleDrop

So far, everything is fine with the draggable items attaching themselves to the droppable div.

Now, I want to tweak this behavior a little:

1. I want the draggable items to arrange themselves ‘automatically’ in the droppable div (called ‘#dropp’ in this example), starting from the top left (they will be floating left). Currently this is not happening even though the ‘#dropp’ div has the ‘float:left’ property set. So, what should I do to have the draggable items arrange themselves when dropped on ‘#dropp’?
2. When I take out a draggable item out of the droppable div (‘#dropp’) I want it return to the div that originally contained the draggable items (‘#drag’ in this example).

Can you please help implement these 2 behaviors?

Answer 1

After trying this on my own and some R&D for nearly 5-6hrs, I have been able to solve both my problems.
For benefit of others who might be facing the same issues, below is the additional code that is required to implement the behaviors described above:

$( "#dropp" ).droppable({
    accept: '#drag div',
    drop: function(event, ui)
    {
    $("div#dropp").append (ui.draggable); 
    $(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" })
               .addClass("moved");
    } // End function for handling drop on '#dropp'
}); //End $( "#dropp" ).droppable

This has been added new:

$( "#drag" ).droppable({
accept : ".moved",
drop : function (event, ui)
{
    $("div#drag").append (ui.draggable);
    $(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" });

} // End function for handling drop on '#drag'
}); // End $( "#drag" ).droppable

That’s all is required to implement the behaviors described above. Hope somebody finds the information useful 🙂