[Solved] Html5 drag drop touch

Hi there - I’m working on my first web app, using React and Meteor. I have drag and drop working just fine on desktop with the very direct html5 approach:

<div draggable="true">foo</div>

The above lets you drag the div around, and other attributes let you do stuff with it.

So far so good. But mobile browsers don’t support html5 drag and drop. There are a few projects that use a polyfill to address this. This one appears to be the easiest to use. Just stick the js file on your site and call it with a script tag.

I made an index.html with nothing but a draggable div in the body. I tested it in chrome’s “responsive mode” with and without dragdroptouch. It worked as expected.

But when I add dragdroptouch to my meteor app, it has no effect. Here’s what I did:

  • put dragdroptouch.js in client/js/
  • added <script src=“js/DragDropTouch.js”></script> to main.html
  • restarted meteor

As a beginner, I’m pretty much out of ideas. Any thoughts would be appreciated.

try putting it into client/compatibility/dragdroptouch.js and don’t add the script tag and see what happens

Thanks for the suggestion. I made the folder, moved the file, got rid of the script tag, and restarted meteor. Unfortunately, no change in behavior.

Maybe you can share some code?

Solved!

Just trying anything I can think of, stumbled into a solution:

  • put DragDropTouch.js in client/lib/compatibility
  • add this line to client/main.js: import ‘./lib/compatibility/DragDropTouch’;

And that’s it. No script tag necessary. Tested on iphone/safari and desktop/chrome/responsive-mode. Hopefully didn’t break anything…

Thanks @jamgold for pointing me in the right direction!