Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
shawnwildermuth opened this issue Mar 25, 2024 · 1 comment

Comments

@shawnwildermuth
Copy link

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
Copy link
Author

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;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant