我需要一些帮助了解这方面的错误。

当将物品投放到可投放的地区(固定地点)时,它会转移到另一个地方,然后试图将它再拖到适当的地方,就会进一步推进......。

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

旷日持久的项目曲线离项目本身相距甚远,大概如果我没有确定治疗者的立场,那么在 mo的地方似乎就正确了,这就是我想要挥霍项目,从而 we了......。

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>