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

Elements do not correctly follow mouse when drug in scrollable context #17

Closed
Specialsaucewc opened this issue Feb 12, 2019 · 12 comments
Closed
Assignees
Labels
bug Something isn't working

Comments

@Specialsaucewc
Copy link

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 rhwilr added the bug Something isn't working label Feb 13, 2019
@rhwilr rhwilr self-assigned this Feb 13, 2019
@rhwilr
Copy link
Owner

rhwilr commented Feb 13, 2019

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

@hibuno
Copy link

hibuno commented Mar 3, 2019

Hi @rhwilr ,

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

screen-shot-2019-03-04-at-2 25 01-am


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

Thanks in advance

@rhwilr
Copy link
Owner

rhwilr commented Mar 4, 2019

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.

@hibuno
Copy link

hibuno commented Mar 4, 2019

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

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

paulm17 commented Sep 1, 2019

@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!

oops

@rhwilr
Copy link
Owner

rhwilr commented Sep 2, 2019

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

@rhwilr rhwilr reopened this Sep 2, 2019
@paulm17
Copy link

paulm17 commented Sep 4, 2019

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

paulm17 commented Sep 24, 2019

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

@rhwilr
Copy link
Owner

rhwilr commented Sep 25, 2019

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

@rhwilr
Copy link
Owner

rhwilr commented Sep 26, 2019

I published v2.4.5 which should fix this bug.

@rhwilr rhwilr closed this as completed Sep 26, 2019
@paulm17
Copy link

paulm17 commented Sep 26, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

5 participants