Elements do not correctly follow mouse when drug in scrollable context

[Specialsaucewc]

If the Vue Nestable list lives within a scroll-able parent, when you drag an element while scrolled to the top everything behaves as expected. However once scrolled down the drug item is offset from the mouse position. I have attached a codesandbox of the Simple example in a scroll-able context for reference/reproducability.

https://codesandbox.io/s/x2zw443r7w

[rhwilr]

Thanks for reporting this issue. It is now fixed in 2.1.1

[SuretnoHQ]

Hi @rhwilr ,

Is this bug has been resolved? Cause i use "vue-nestable": "^2.2.0" and still get a bug like image below :

---

Btw i use create it from example CrossList.vue and NoItems.vue.

Thanks in advance

[rhwilr]

Yes, it has been fixed:

It is now fixed in 2.1.1

Can you link to the source code, or provide an example that produces this bug? Preferably using a CodeSandbox. Do you get the same bug on the demo page?

It might be related to the CSS you use.

[SuretnoHQ]

Hi @rhwilr,

I am sorry this is a private project so i can't share a code. But i think this bug came cause i use BootstrapVue & ElementUI together inside a NuxtJS.

So maybe the style of this library collide with their css.

Thanks in advance

[stevebritton]

@muhibbudins, I was experiencing the same ghost issue when I was setting a specific height and overflow on the nestable list class, for example:

<vue-nestable v-model="sitemapNested">
    <template slot-scope="{ item }">
        <vue-nestable-handle :item="item">
            <i :class="['fa fa-bars', item.class]" />
        </vue-nestable-handle>
        {{ item.text }}
    </template>
</vue-nestable>

<style lang="scss">
.nestable-list{
  height: 600px;
  overflow-y: scroll;
}
</style>

To resolve the issue, I added a parent container and applied the css to the parent:

<div class="nestable-wrapper">
  <vue-nestable v-model="sitemapNested">
      <template slot-scope="{ item }">
          <vue-nestable-handle :item="item">
              <i :class="['fa fa-bars', item.class]" />
          </vue-nestable-handle>
          {{ item.text }}
      </template>
  </vue-nestable>
</div>

<style lang="scss">
.nestable-wrapper{
  height: 600px;
  overflow-y: scroll;
}
</style>

Hope this helps you.

[paulm17]

@rhwilr This is hands down the best nestable component available.

Can you re-open this issue? I have the same problem and don't mind recreating the use case for you to look at. I would really like for this to be resolved.

Here is a screenshot of what's happening.

Let me know and I'll put it together, thanks!

[rhwilr]

@paulm17 Sure, I'll reopen the issue. It would really help, if you could create a demo that showcases the issue. I would also happily accept a PR if you happen to find the problem.

[paulm17]

@rhwilr I have put up a really janky demostration over at https://codesandbox.io/s/vue-template-krymb

I've essentially just ripped out what I'm doing and threw it together. But it should give you an idea of what's going on.

One thing though. I'm using a forked an earlier version of your component as were some extra functionality that I needed. I haven't had the time to use your current version and see whether I need to do so again.

[paulm17]

@rhwilr Did you manage to find some time to look at this issue? Thanks

[rhwilr]

I haven't had the time yet. I hope I'll get around to it by the end of the week.

[rhwilr]

I published v2.4.5 which should fix this bug.

[paulm17]

Awesome, will check it out in the next couple of days and report back.