1

説明したように、私が持っているメニューの種類からいくつかの div をドラッグし、それらを特定の div にドロップできるようにしたい.

http://jsfiddle.net/bysnc/

ただし、それぞれに「x」ボタンを追加して、「x」ボタンをクリックすると、ドラッグ可能/ドロップ可能な要素が元の位置に戻る(元に戻る)ようにしたい..

私はこれを見つけた

http://jsfiddle.net/v7n6w/

これは私が望んでいたもののように思えました（実際には、全体的なものではなく、それぞれに固有のボタンが必要です..しかし、1）これはjsfiddleでもドロップされないようです2）私のテストでは、コンソールにエラーが表示されます"Uncaught TypeError: 未定義のプロパティ 'originalPosition' を読み取ることができません"

具体的には、この行でエラーが発生します ui.draggable.data("draggable").originalPosition);

ここにjs部分があります..

function revertDraggable($selector) {
    $selector.each(function() {
        var $this = $(this),
            position = $this.data("originalPosition");

        if (position) {
            $this.animate({
                left: position.left,
                top: position.top
            }, 500, function() {
                $this.data("originalPosition", null);
            });
        }
    });
}   

$(document).ready(function() {
    $("#drag").draggable({
        revert: "invalid"
    });

    $("#floor").droppable({
        drop: function(event, ui) {
            if (!ui.draggable.data("originalPosition")) {
                ui.draggable.data("originalPosition",
                    ui.draggable.data("draggable").originalPosition);
            }
        }
    });

    $("#other").click(function() {
        revertDraggable($("#drag"));
    });

});

私のhtmlは次のようになります

ドロップ可能な位置 fooにのみドロップできるようにしたい

<div id="container">
    <div id="floor">foo</div>
    <div id="other">bar</div>
</div>

そして初期位置

 <div class="menu" id="power" width="300">
<div class="options ui-widget-content" id="drag"><img src="1.jpg"/></div>
    <div class="options ui-widget-content" id="drag2"><img src="2.jpg"/></div>
</div>

psプラグインjquery.uiではなく、jqueryだけでこれをダウンさせることができますか?

4

1 に答える 1

1

2 つのサンプルからの混合コード

    $('#floor').droppable({
    tolerance: 'fit'
});

$('.draggable-div').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
        $(this).find('.undo').show();
    }
});

$('.draggable-div').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
    revertDraggable($div);
});

$('#floor').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event,ui){
       // ui.draggable.draggable('option','revert',true);
        if (!ui.draggable.data("originalPosition")) {
        ui.draggable.data("originalPosition",
                          ui.draggable.data("draggable").originalPosition);
        
        }


        $(this).find('.undo').show();
    }
});

function revertDraggable($selector) {
    $selector.each(function() {
        var $this = $(this),
            position = $this.data("originalPosition");

        if (position) {
            $this.animate({
                left: position.left,
                top: position.top
            }, 500, function() {
                $this.data("originalPosition", null);
            });
        }
    });
    
    $selector.find('.undo').hide();
}

ここで完全なコードを参照してください。

それは今動作します

于 2013-04-04T09:30:08.277 に答える