Issue dropping below last item about vue-smooth-dnd HOT 12 OPEN

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).

from vue-smooth-dnd.

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.

from vue-smooth-dnd.

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.

from vue-smooth-dnd.

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>

from vue-smooth-dnd.

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?

from vue-smooth-dnd.

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

from vue-smooth-dnd.

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.

from vue-smooth-dnd.

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

from vue-smooth-dnd.

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.

from vue-smooth-dnd.

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?

from vue-smooth-dnd.

@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

from vue-smooth-dnd.

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

from vue-smooth-dnd.