rhwilr/vue-nestable

Issues on mobile devices - links and drag&drop not working

nmihin opened this issue · 8 comments

nmihin commented

I added "delete" and "edit" actions inside VueNestableHandle and it works fine on desktop. The problem is on native devices, there is only a drag and drop option and I cannot click on my "delete" and "edit" buttons. Also, the drag option gets permanently stuck and I need to tap again to release the drag when using "cross-list" and group="cross" options.

Check out the video of this issue on the link: https://www.youtube.com/watch?v=PmbgKfceknQ&feature

...or the screenshots in the attachment

screen_1
screen_2

rhwilr commented

This looks to me like you need to stop the touch event from propagating when clicking the button. Have you tried adding the .stop modifier to the event listener?

dallinbjohnson commented

I am having the same problem on mobile and I have tried both .prevent .stop for @click on the icons.

rhwilr commented

I'll need more information in order to assess if this is a problem with vue-nestable.

  • Does it work on the demo page?
  • Can you link the source to your component or create a simple reproduction case?
  • Which mobile OS, Browser..?
rhwilr commented

You could also try to listen for the touchstart event instead of click.

dallinbjohnson commented

@rhwilr So you will have to inspect the page and use the mobile mode to get the errors. https://codesandbox.io/s/gracious-dew-h9v9j?file=/src/pages/Index.vue

rhwilr commented

If you use @touchstart.stop="edit(scope.item)" it works. I don't think there is anything wrong with vue-nestable. You just have to make sure to handle your touch events for mobile.

dallinbjohnson commented

If you use @touchstart.stop="edit(scope.item)" it works. I don't think there is anything wrong with vue-nestable. You just have to make sure to handle your touch events for mobile.

Thanks I will start using @touchstart.stop="edit(scope.item)

dallinbjohnson commented

@rhwilr I get errors in the console on mobile when dragging between list groups.

client-hook-6.js:1 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'getBoundingClientRect' of null"

found in

---> <VueNestableHandle>
       <NestableItem>
         <VueNestable>
           <DraggableTree> at src/pages/draggableTree.vue
             <QPage>
               <PageIndex> at src/pages/Index.vue
                 <QPageContainer>
                   <QLayout>
                     <MyLayout> at src/layouts/MyLayout.vue
                       <App> at src/App.vue
                         <Root>