Dragging and dropping to Table Rows using jQuery UI
<p>I am trying to create a drag-drop UI calendar scheduler/planner (something like google or outlook) using jQuery UI's <code>draggable</code> and <code>droppable</code>. But after applying the methods, I am unable to drag and drop the <code>droppable</code> content after it is dragged to first row with class <code>droppable</code>, or I should say, unable to drag to any other row other than the first <code>droppable</code> class element.</p>

<p>Here is the js code:</p>

<pre><code>$().ready(function () 
    {
        $(".droppable tr td").droppable();
        $(".draggable").draggable({
            containment: '.droppable'
        });
    });
</code></pre>

<p>Here is the <a href="https://jsfiddle.net/yobfjwtj/2/" rel="nofollow">Fiddle</a>.</p>

<p>I want to be able to drag and drop to any row in the table with <code>droppable</code> class.</p>