jqueryui draggable droppable issue

Question

I need some help in understanding what's wrong with this.

when drop item into droppable area (template place), it will move to another place, then when try to drag it to the right place again, it will move even further...

eg: after i drop both apple & banana into droppable area, if I move banana near to apple, it will stick together..

the drag item cursor move is far away from the item itself, supposingly if I didn't set cursor position, it will appear right at the place mouse is when I want to drag item, thus weird...

as long as item is moved out from droppable area, it need to fly back to draggable and show up neatly at draggable area (item list place). but seems keep on locked / cannot fly back neatly

    <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>

        <style>

    #droppable {
            border:1px solid #000;
            font-weight:bold;
            background-color:#FFF;
            width: 300px;
            height: 400px;
            padding: 0.5em;
            float: left;
            margin: 10px;
        }

    #draggable{
        width:300px;
        float:left;
        border:1px solid #000;
        background-color:#E2EBED;
        padding:3px;
        height:500px;
    }

    .dragableBox{
        border:1px solid #000;
        background-color:#FFF;
        font-weight:bold;
        text-align:center;
        width:150px;
        height:auto;
        margin-bottom:5px;
        padding:3px;
    }

    </style>

        <script type="text/javascript">

    $(function() {

                //draggable setting
        $( ".dragableBox" ).draggable({
                   revert: "invalid",
                   revertDuration: 1000,
                   cursor: "move",
                   delay: 200,
                   opacity: .45,
                   refreshPositions: true,
                   snap: true,
                   containment: "#droppable"
                   //helper: "clone"
                });

                //to allow item at droppable div go back to draggable div neatly.
        $( "#draggable" ).droppable({
                        accept: '.dragableBox',
            drop: function( event, ui ) {

                          var draggable = ui.draggable;

                                $("#draggable").append(ui.droppable);
            }
        });

                //to append and show it out
        $( "#droppable" ).droppable({

                        accept: '.dragableBox',

            drop: function( event, ui ) {

                          var draggable = ui.draggable;

                          var html= 'Dropped!' + '<br>' +
                              'The square with ID "' + draggable.attr('id') + '" was dropped onto me!' + '<br>' +
                              'left:'+ ui.position.left + ' top:'+ ui.position.top;

              //ajax save actual position to db for later retrieval.

                                $("#droppable").append(ui.draggable);
            }
        });
    });

    </script>




<div class="demo">

<div id="draggable" >
        <div class="dragableBox" id="box1">apple</div>
        <div class="dragableBox" id="box2">banana</div>
        <div class="dragableBox" id="box2">mango</div>
</div>

<div id="droppable" >

</div>

</div>

Answer 1

See this Demo : http://jsfiddle.net/pHJgP/5/

Jquery Code

$(document).ready(function() {
    var currentParent;

        $("#draggable .dragableBox").draggable({
            cursor: "move",
            delay: 200,
            opacity: .45,
            refreshPositions: true,
            snap: true,
            revertDuration: 1000,     
            revert: 'invalid',
            start: function(){
                currentParent = $(this).parent().attr('id');
            }
        });

    $('#draggable, #droppable').droppable({
        accept:'.dragableBox',
        drop: function(event,ui){
            if (currentParent != $(this).attr('id')){
              $(ui.draggable).addClass( "ui-state-highlight" );
            }
        }
    });



});

HTML Code

<div class="demo">

<div id="draggable" >
        <div class="dragableBox" id="box1">apple</div>
        <div class="dragableBox" id="box2">banana</div>
        <div class="dragableBox" id="box2">mango</div>
</div>

<div id="droppable" >

Your Style

#droppable {
            border:1px solid #000;
            font-weight:bold;
            background-color:#FFF;
            width: 300px;
            height: 200px;
            padding: 0.5em;
            float: left;
            margin: 10px;
        }

    #draggable{
        width:300px;
        float:left;
        border:1px solid #000;
        background-color:#E2EBED;
        padding:3px;
        height:200px;
    }

    .dragableBox{
        border:1px solid #000;
        background-color:#FFF;
        font-weight:bold;
        text-align:center;
        width:150px;
        height:auto;
        margin-bottom:5px;
        padding:3px;
    }