[feature] Support setting drop target or allowing draggable to be nested children.

[shawnwildermuth]

Is your feature request related to a problem? Please describe. When using sortable.js with two tables, drag and drop work between the tables, but the drop target for the row, is tiny if there are no elements in the second table. This is setting the parent to a

. If I set the table as the parent, it thinks the entire table is the draggable item. using .draggable or .item doesn't seem to work.

Describe the solution you'd like Would like to set a selector for the drop (e.g. the table or a div that contains the table):

new Sortable(example3Left, example3Right, {
    group: {
        name: 'shared',
        pull: 'clone' // To clone: set pull to 'clone'
    },
    animation: 150,
    dropTarget: "#container"
});

For an example markup like:

<div id="container">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>Is Customer?</th>
      </tr>
    </thead>
    <tbody id="first">
      <tr>
        <td>Foo</td>
        <td>404040404</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="container">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>Is Customer?</th>
      </tr>
    </thead>
    <tbody id="second">
      <tr>
        <td>Foo</td>
        <td>404040404</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
</div>

Describe alternatives you've considered I am using emptyInsertThreshold which helps, but isn't actually what I want.

[shawnwildermuth]

Note, using a tbody:empty css rule seems to make this better, but still not exactly what I think we need. E.g.:

tbody:empty {
  display: block;
  padding-bottom; 40px;
}