All geek questions in one place

Can I drag and drop images using the touch screen

My HTML5 app allows you to drag and drop images from another web page. But when using a PC in tablet mode, I can not drag and drop images, maybe this should be possible in 2018?

If this is truly impossible, what alternative mechanism can I use to allow the user to use an image from another site?

+5
source share
2 answers

look:

var draggable = document.getElementById('draggable'); draggable.addEventListener('touchmove', function(event) { var touch = event.targetTouches[0]; // Place element where the finger is draggable.style.left = touch.pageX-25 + 'px'; draggable.style.top = touch.pageY-25 + 'px'; event.preventDefault(); }, false);

Also, here is a tutorial: http://mobiforge.com/design-development/touch-friendly-drag-and-drop

Please let me know if it works, or you need more help with this :)

Edit: Here is a jsfiddle with the test I built earlier. I updated it with comments so you can see what happens there. Maybe a JavaScript professional would like to hit me for this, but it works for my purpose, and I seem to have worked. I did not test it in old browsers, though, since this is a personal project, and I'm not going to “optimize for the IE method” there

+3
source

jQuery UI Touch Punch is here

Touch Event support for jQuery UI. Basically, it just passes the touch event back to the jQuery UI. Tested on iPad, iPhone, Android and other touch screen mobile devices.

-1
source

Source: https://habr.com/ru/post/1276142/

More articles:


All Articles