Functioning on mobile

[DedicatedManagers]

Great simple plugin! It doesn’t seem to work on my iPhone though. Any simple way to make it work with mobile devices?

[alejandroledesma]

+1

[sirdiego]

Since this is only a wrapper around the HTML5 drag and drop spec you need to make sure that the browser supports this. According to https://caniuse.com/#feat=dragndrop most mobile browsers sadly do not support the spec. But there are polyfills to help with this:

• https://github.com/timruffles/mobile-drag-drop

I have not tested this with vue-drag-drop yet.

[sirdiego]

FYI: We have now integrated the polyfill with our application and vue-drag-drop works like a charm on mobile devices.

[bi6o]

Hey, thanks for the great plugin. I am having the same issue with mobile. The d&d works as expected on chrome desktop, but does not work at all on mobile android. I have installed the plugin today, so it should be up-to-date

Let me know what I can provide for you for better debugging

[DedicatedManagers]

Great to hear its been updated. I will give it a try!

[DedicatedManagers]

I figured I'd check the new functionality via your demo. Have you updated the demo? It doesn't seem to be working on my phone: https://cameronhimself.github.io/vue-drag-drop/

[pumpknhd]

FYI: We have now integrated the polyfill with our application and vue-drag-drop works like a charm on mobile devices.

@sirdiego Can you share your code to get vue-drag-drop to work with polyfill (mobile-drag-drop)?

[serdarcevher]

FYI: We have now integrated the polyfill with our application and vue-drag-drop works like a charm on mobile devices.

@sirdiego Can you share your code to get vue-drag-drop to work with polyfill (mobile-drag-drop)?

After adding "mobile-drag-drop" to my packages.json and installing it, this is what I've added to my existing js file to make the functionality work on iOS devices:

import {scrollBehaviourDragImageTranslateOverride} from 'mobile-drag-drop/scroll-behaviour';

polyfill({
    dragImageTranslateOverride: scrollBehaviourDragImageTranslateOverride,
});

window.addEventListener('dragenter', function(event) {
    event.preventDefault();
});
window.addEventListener('touchmove', function() {
});

[erictonussi]

FYI: We have now integrated the polyfill with our application and vue-drag-drop works like a charm on mobile devices.

@sirdiego Can you share your code to get vue-drag-drop to work with polyfill (mobile-drag-drop)?

After adding "mobile-drag-drop" to my packages.json and installing it, this is what I've added to my existing js file to make the functionality work on iOS devices:

import {scrollBehaviourDragImageTranslateOverride} from 'mobile-drag-drop/scroll-behaviour';

polyfill({
    dragImageTranslateOverride: scrollBehaviourDragImageTranslateOverride,
});

window.addEventListener('dragenter', function(event) {
    event.preventDefault();
});
window.addEventListener('touchmove', function() {
});

You are missing this import:

import {polyfill} from "mobile-drag-drop";
import {scrollBehaviourDragImageTranslateOverride} from 'mobile-drag-drop/scroll-behaviour';

polyfill({
    dragImageTranslateOverride: scrollBehaviourDragImageTranslateOverride,
});

window.addEventListener('dragenter', function(event) {
    event.preventDefault();
});
window.addEventListener('touchmove', function() {
});