jQueryの "drop"と "over"はdroppableで起動しません

Question

私はweb-devのスキルを向上させようとしていましたが、jQueryのドラッグ＆ドロップ機能を少し使い果たしました。残念ながら、私は落ちることの "ドロップ"または "オーバー"イベントを発生させることはできません。

jQueryテーブルのドラッグ＆ドロッププラグインを使用したくないので、td構造のdivに複数のdivがあります（すべて$（document）.readyで生成されています）。中央のdivはドロップ可能になり、内側のdivはdraggableになります。生成されるHTMLは、次のようになります。

<td class="vertical"> 
<div id="droppable3" class="droppable ui-droppable" style="width: 100%; height: 100%;" 
over="function() { alert("working!"); }" 
drop="function (event, ui) { 
    debugger; 
    var firstDrag = ui.draggable; 
    var secondDrag = $(this).childNodes[0]; 
    var destDrop = $(this); 
    var sourceDrop = firstDrag.parent; 
    $("#middle").append("first drag:" + firstDrag.id + "\nSecondDrag:" + secondDrag.id 
    + "\ndest Drop:" + destDrop.id + "\nsourceDrop:" + sourceDrop.id); }"> 
     <div id="draggable3" class="draggable ui-draggable" 
     style="width: 100%; height: 100%;"> 
     </div> 
</div> 
</td> 

このIDは、ID以外の他のTDとまったく同じです。

ドラッグがうまくいくようです。私はその内側のdivをドラッグすることができますし、私はそれが適切なdroppableに置くしない場合、または私はそれをスティックしない場合は戻ってきますが、 "オーバー"または "ドロップ"イベントをトリガーしません。そのコード内のデバッガ行は決してヒットしません。ここで

は、私はドラッグ/ドロップ可能設定してい方法です：

function getTD(claz){ 
var td = jQuery("<td/>",{'class': claz}); 
var droppable = jQuery("<div/>",{ 
    'class': 'droppable', 
    width: '100%', 
    height:'100%', 
    id: "droppable"+ids[index], 
    over: function() { 
     alert('working!'); 
    }, 
    drop: function(event,ui){ 
     debugger; 
     var firstDrag = ui.draggable; 
     var secondDrag = $(this).childNodes[0]; 
     var destDrop = $(this); 
     var sourceDrop = firstDrag.parent; 
     $("#middle").append("first drag:"+firstDrag.id +"\nSecondDrag:"+secondDrag.id 
      +"\ndest Drop:"+destDrop.id +"\nsourceDrop:"+sourceDrop.id); 

     } 
    }); 
    var draggable = jQuery("<div/>",{ 
     'class': 'draggable', 
     width: '100%', 
     height:'100%', 
     id: "draggable"+ids[index], 
    }); 

    draggable.draggable({ 
     revert: 'invalid' 
    }); 
    droppable.droppable({ 
     accept: ".draggable" 
    }); 
    index++; 
    droppable.append(draggable); 
    td.append(droppable); 
    return td; 

}

基本的に私は何を達成しようとしていますと、テーブル内のスワップ可能なタイルであると私はJSかなり確信していますイベントハンドラでは、ゴミであるが、一度発射すると処理されます。使用

ああとイム： https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js

を任意のコメントをいただければ幸いです。 感謝:)

EDIT：

私は本当に愚かされていました。私は要素の属性ではなく、ドロップ可能なオプションの "ドロップ"と "オーバー"イベントを入れていた！

Answer 1

thatは何ですか？あなたはこの

$("#something").droppable({ 
    drop: function(event, ui) { 
     // action 
    }, 
    over: function() { 
     // action 
    } 
});