5

1 つのドロップ エリアに必要なブロックは 1 つだけで、必要に応じて切り替えることができます。ドロップ可能な機能を無効にできるのに、有効にできないのはなぜですか?

これが私のコードです：

$('.my_block').draggable({
    revert: "invalid",        
});

$('.free').droppable({         
    accept: ".my_block",
    drop: function(ev, ui) {             
        $(this).removeClass("free");    
        $(this).addClass("1");                
        ui.draggable.appendTo($(this)).removeAttr('style');
            $(this).droppable("disable");              
        },
        out:  function(ev, ui) {                     
            $(this).droppable("enable");    
            $(this).removeClass("1");    
            $(this).addClass("free");            
        },        
    });

jsfiddle http://jsfiddle.net/4ABCN/2/

また、ボタン 1 つですべての赤いブロックをメインの位置に戻すにはどうすればよいですか?

4

1 に答える 1

2

動作中のデモ 古いデモを削除

新しいデモこれを試してください: http://jsfiddle.net/7EbKS/

動作: ユーザーが赤いボックスを移動すると、空の位置に別のボックスをドロップできるようになりました。

それが原因に適合することを願っています:)

コード

  $(function() {
    foo();

    $('.my_block').draggable({
        revert: "invalid",
        stop: function() {
            $(this).draggable('option', 'revert', 'invalid');
        }

    });

    function foo() {
        $('.block').droppable({
            greedy: true,
            accept: ".my_block",
            // tolerance: "fit",
            drop: function(ev, ui) {
                ui.draggable.appendTo($(this)).removeAttr('style');
             }
        });
    }
    $('.my_block').droppable({
        greedy: true,
        tolerance: 'touch',
        drop: function(event, ui) {
            ui.draggable.draggable('option', 'revert', true);
        }
    });

});
于 2012-10-30T23:42:12.123 に答える