Issue dropping below last item

[colinbes]

First, great project.

I have followed table demo to create a table that I can drop items from different container as well as move order around in table.

Issue I am having is that if I try drag and drop below last row it often fails and just 'bounces' back to original position.

I have attached screenshots attempting to show issue.

I am using bootstrap and don't know if this is somehow causing issue but initial thoughts are it isn't.

[colinbes]

Also, note when dragging how the dragged image is reduced in size - I don't mind this but don't know what's causing or how to prevent it.

[loren138]

I added CSS to make the drag container (div.smooth-dnd-container) taller so there is empty space at the bottom rather than the bottom of the container also being the bottom of the last element in the container and that solved my issue of dropping at the bottom.

[colinbes]

Thanks @loren138, would you mind explaining a little more on what you did in order to make drag container taller. I have messed around with margin and padding which didn't help solve the issue.

My HTML code looks like:

<table data-v-ae7b0884="" class="table">
    <thead data-v-ae7b0884="">
        <tr data-v-ae7b0884="">
            <th data-v-ae7b0884="">Mode</th>
            <th data-v-ae7b0884="">Start (hz)</th>
            <th data-v-ae7b0884="">End (hz)</th>
            <th data-v-ae7b0884="">Period (s)</th>
        </tr>
    </thead>
    <tbody data-v-ae7b0884="" class="smooth-dnd-container vertical">
        <tr data-v-ae7b0884="" class="smooth-dnd-draggable-wrapper">
            <td data-v-ae7b0884="">linear</td>
            <td data-v-ae7b0884="">100</td>
            <td data-v-ae7b0884="">1000</td>
            <td data-v-ae7b0884="">10</td>
        </tr>
        <tr data-v-ae7b0884="" class="smooth-dnd-draggable-wrapper">
            <td data-v-ae7b0884="">linear</td>
            <td data-v-ae7b0884="">1000</td>
            <td data-v-ae7b0884="">100</td>
            <td data-v-ae7b0884="">10</td>
        </tr>
    </tbody>
</table>

[ssnetxyz]

This is also my biggest issue with this library (which I otherwise think is great by the way!). There simply is no good way to handle drops outside a container. I think this is the same issue as: #42.

@drag-end does not trigger until after the animation so you never get the chance to handle it. And even if it did, there is no way to detect where the item was dropped. Using some "catch-all" container, quickly gets very messy (If I'm wrong about this, I'd love to see a non-messy example!)

So the remaining option is to add your own event-listeners to handle drops, on-top of the drag-drop-library you just installed. It feels just a tad silly.

edit: It looks like onDropReady (available in smooth-dnd but not available in vue-smooth-dnd (yet?)) could solve my problems. It seems as if you then could store a "last droppable state" and use the "helpers/applyDrag()" early (for example on drag-leave) before the element is dropped by the user. Correct?

[loren138]

@colinbes I just set the height of my containers to a fixed height. (250px) in my case.

[colinbes]

Thanks @loren138 , sadly this issue rules out using this code. I will try take a closer look this coming week to see if I can figure something out.

[orimay]

Same issue here! It would've been awesome if it was possible to make items movement restricted within the drop area. That would completely solve the issue. Also, making it possible to fall back to the latest valid drag position, would complete this amazing library

[colinbes]

Was wondering if there was any further development/input to this issue as I am still unable to reliably move/copy item after container's last item.

[kutlugsahin]

Hey all,
Container is a simple div that contains the draggable items, so for vertical container the height of it would be as tall as the children. But as @loren138 suggested you can override it's height by targeting smooth-dnd-container class or you can use tag property to render container yourself.
@orimay you can use behaviour="contain" property to restrict dragged item in the container boundary.
You can also use new dropPlaceholder property to highlight current valid drop area.
Hope this helps.
@colinbes can you share a codesandbox sample to clarify the issue you are facing?

[colinbes]

@kutlugsahin I created a quick and dirty example of issue at https://codesandbox.io/s/q8j93v8wl9?fontsize=14.
This is rough cut and paste of actual project but haven't put effort into formatting to please ensure browser view is wide enough to view with wrapping text. It shows you can drag from left column in to right and insert above line 1 or line 2, but not below line 2

[vandelpavel]

I have the same error in my project. I'm trying to recreate a drag and drop feature inside a group of tables.
So i have nested layers something like:

<q-list>   //<--main container
  <table v-for="..." >  //<--main draggables
    <tbody> //<--nested container
      <tr v-for="..." .../> //<--nested draggable

The main draggables works great! Problems comes inside the tbody.
As far as i know this dnd doesn't work inside an element with display:table.
I'v tried the exact same structure removing the table and using div instead and the dnd works.
We need to find a solution to make it work also in non display:block container (so inside tables too).

[aniket-kale]

Thanks @vandelpavel. I had same issue I solved by converting from table, tr, td to div structure.