1

これの何が問題なのかを理解するのに助けが必要です。

ドロップ可能な領域（テンプレートの場所）にアイテムをドロップすると、別の場所に移動します。次に、アイテムを正しい場所にもう一度ドラッグしようとすると、さらに移動します...

例：リンゴとバナナの両方をドロップ可能な領域にドロップした後、バナナをリンゴの近くに移動すると、一緒にくっつきます。

ドラッグアイテムのカーソル移動はアイテム自体から遠く離れています。おそらく、カーソル位置を設定しなかった場合、アイテムをドラッグしたいときにマウスが置かれている場所に表示されるので、奇妙です...

アイテムがドロップ可能領域から移動されている限り、ドラッグ可能に戻ってドラッグ可能領域（アイテムリストの場所）にきれいに表示される必要があります。しかし、ロックされたままのようです/きれいに戻ることができません

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

2 に答える 2

1

このデモを参照してください: http://jsfiddle.net/pHJgP/5/

Jクエリコード

$(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;
    }
于 2012-05-11T06:47:56.983 に答える
0

こんにちは、このjsfiddleリンクを確認してください

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

これがあなたが探している解決策であることを願っています

于 2012-05-11T06:18:18.090 に答える