Drag & Drop auf Tabellenzeilen mit jQuery UI

Question

Ich versuche, eine Drag-Drop-UI-Kalender-Planer/Planer (etwas wie Google oder Outlook) mit jQuery UI draggable und droppable zu erstellen. Aber nach dem Anwenden der Methoden kann ich den Inhalt droppable nicht ziehen und ablegen, nachdem er in die erste Zeile mit der Klasse droppable gezogen wurde, oder ich könnte sagen, nicht in eine andere Zeile als das erste droppable Klassenelement ziehen. Hier

ist der JS-Code:

$().ready(function() 
    { 
     $(".droppable tr td").droppable(); 
     $(".draggable").draggable({ 
      containment: '.droppable' 
     }); 
    }); 

Hier ist die Fiddle.

Ich möchte Drag and Drop auf jede Zeile in der Tabelle mit droppable Klasse.

Answer 1

Sie containment: '.droppable' gesetzt haben, droppable ist die Klasse in <tr> Tags, so, wenn Sie es in einem tr.droppable fallen, können Sie es aus nicht nehmen.

Dies kann durch einfaches Entfernen containment: '.droppable' gelöst werden. Updated demo