Question

我需要一些帮助来理解这个问题。

当将项目放入可放置区域（模板位置）时，它将移动到另一个位置，然后当尝试再次将其拖动到正确的位置时，它将进一步移动...

例如：在我放下苹果和苹果之后香蕉进入可放置区域，如果我将香蕉移到苹果附近，它会粘在一起..

拖动项目光标移动距离项目本身很远，假设如果我没有设置光标位置，它会出现在我想要拖动项目的鼠标位置，因此很奇怪......

只要项目从可放置区域移出，它就需要飞回可拖动并在可拖动区域（项目列表位置）整齐地显示。但似乎保持锁定/不能整齐地飞回来

    <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

请参阅此演示：http://jsfiddle.net/pHJgP/5/

Jquery代码

$(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代码

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

你的风格

#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;
    }

Answer 2

嗨检查这个jsfiddle链接

http://jsfiddle.net/BbSLy/21/

希望这是您正在寻找的解决方案感谢

Answer 3

此链接可能对您有用 http://www.stevefenton.co.uk/cmsfiles/assets/File/mobiledragdrop.html

jqueryui draggable droppable问题

3 个答案: