3 
$(".LWdrop").droppable({    
    accept: ".LW",                       
    drop: function(event, ui){
      ui.draggable.addClass("LWactive");
      $(this).droppable('option', 'accept','');
      $(this).css("background-color", "#444444");
    },
    out: function(event, ui){  
      $(this).droppable('option', 'accept', '.LW');
      ui.draggable.removeClass("LWactive");
    },   
    activate: function(event, ui){     
      $(this).css("background-color", "blue");      
    },  
    deactivate: function(event, ui){  
      $(this).css("background-color", "#444444"); 
    }
});

アクティブ化/非アクティブ化時の醜い背景色の変更は無視してください。これはテスト専用です。「out」がトリガーされないという問題があります。これは、ドラッグ可能なアイテムが「元に戻す:無効」に設定されているという事実と関係があるのでしょうか? それを削除しても、out イベントから何も取得できず、単純な警告ボックスでさえも実行できません。任意のヒント？

4

3 に答える 3

1

これは誰かに役立つことがあります。

$("#element").droppable({
    over: function( event, ui ) { // dragged over #element
        $(event.target).removeClass('out');
        $(event.target).addClass('over');
    },          
    out: function( event, ui ) { // dragged out #element
        $(event.target).removeClass('over');
        $(event.target).addClass('out');
    },
    deactivate: function (event, ui) { // dropped somewhere
        state = $(event.target).hasClass('over') ? 'over' : 'out');
        if (state == 'out') {
            alert('dropped outside #element');
        }
    }
});
于 2012-05-15T11:22:28.750 に答える
1

ドロップ可能にドラッグしたときにヘルパーを視覚的に (クラスを切り替えることによって) 変更しようとすると、同様の問題に遭遇しました。あなたと同じように、期待していたときに out イベントが発生しなかったことがわかりました。

試行錯誤の結果、over イベントでクラスを追加し、deactivate イベントでクラスを削除することで問題を解決しました。

$("#droppable").droppable({
    over: function(event, ui) {
        ui.helper.toggleClass("over", true);
    },
    deactivate: function(event, ui) {
        ui.helper.toggleClass("over", false);
    }
});
于 2010-09-09T14:24:51.007 に答える