jquery ui - jQueryUI Sortable | Drag elements among different parents -

is possible?

here simplified mockup. green rows can have more 1 cell , must draggable/sortable. can dragged anywhere top bottom. red cells stay in place because they're dates.

here code:

<table>     <tr>         <td>may 01</td>         <td>             <table>                 <tr>                     <td>some text</td>                     <td>some text</td>                     <td>some text</td>                 </tr>             </table>         </td>     </tr>     <tr>         <td>may 02</td>         <td>             <table>                 <tr>                     <td>some text</td>                     <td>some text</td>                     <td>some text</td>                 </tr>                 <tr>                     <td>some text</td>                     <td>some text</td>                     <td>some text</td>                 </tr>             </table>         </td>     </tr>     <tr>         <td>may 02</td>         <td>             <table>                 <tr>                     <td>some text</td>                     <td>some text</td>                     <td>some text</td>                 </tr>                 <tr>                     <td>some text</td>                     <td>some text</td>                     <td>some text</td>                 </tr>                 <tr>                     <td>some text</td>                     <td>some text</td>                     <td>some text</td>                 </tr>             </table>         </td>     </tr> </table> 

jsfiddle

html

<table>     <tbody>     <tr>         <td>may 01</td>         <td class="mt3">             <table>                 <tr>                     <td>1 text</td>                     <td>some text</td>                     <td>some text</td>                 </tr>             </table>         </td>     </tr>     <tr>         <td>may 02</td>         <td class="mt3">             <table>                 <tr>                     <td>2 text</td>                     <td>some text</td>                     <td>some text</td>                 </tr>                 <tr>                     <td>3 text</td>                     <td>some text</td>                     <td>some text</td>                 </tr>             </table>         </td>     </tr>     <tr>         <td>may 02</td>         <td class="mt3">             <table>                 <tr>                     <td>4 text</td>                     <td>some text</td>                     <td>some text</td>                 </tr>                 <tr>                     <td>5 text</td>                     <td>some text</td>                     <td>some text</td>                 </tr>                 <tr>                     <td>6 text</td>                     <td>some text</td>                     <td>some text</td>                 </tr>             </table>         </td>     </tr>     </tbody> </table> 

script

$(function() {     $(".mt3 tbody").sortable({             connectwith: ".mt3 tbody",             start: function (event, ui) {                     ui.item.toggleclass("highlight");             },             stop: function (event, ui) {                     ui.item.toggleclass("highlight");             }         });     $("td").disableselection(); });