CODEWITHSUNDEEP
jquery-uidrag-and-drop
Shahriar N Khondokar
Shahriar N Khondokar

Reputation: 578

Issue with JQuery UI 'Droppable'

This is the problem I am having: I have created several draggable elements but when I drop one on the droppable element, it does not stay there. Below are more details.

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
         } )

So, far everything seems to be as expected and I am able to drag my elements (created from 'items' array).

Next, I have created the droppable element as shown below:

         $( "#dropp" ).droppable({
         drop: function() {
         alert('ok');
             }
         });
    }// End function init()
</script>

But when I drag one of my draggable elements on this droppable element, I even get the alert, but the draggable element does not stay on the droppable element.

Can anyone please help me identify why my draggable element is not staying on the droppable element?

Thanks in advance for any help!

Upvotes: 0

Views: 555

Answers (2)

Shahriar N Khondokar
Shahriar N Khondokar

Reputation: 578

Thanks very much for pointing me in the right direction. I have solved this particular problem in the following way:

I have edited my droppable code as below:

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

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

This has solved the problem of the draggable not staying on the droppable (that was previously described).

Upvotes: 0

Ash
Ash

Reputation: 1649

You have used revert :true.. It means

Revert means If set to true, the element will return to its start position when dragging stops. Possible string values: 'valid', 'invalid'. If set to invalid, revert will only occur if the draggable has not been dropped on a droppable. For valid, it's the other way around.

Probably you need invalid in case your draggable element is not dropped on proper element

Upvotes: 1

Related Questions