CODEWITHSUNDEEP
htmltablet
Paul Taylor
Paul Taylor

Reputation: 13190

Is it possible to drag drop images with touch screen device

My HTML5 application lets you drag and drop images from another webpage. But when using PC in tablet mode I cannot seem to drag images, surely this must be possible in 2018?

If it really is not possible, what alternative mechanism can I use to allow User to use the image from another website?

Upvotes: 8

Views: 5215

Answers (1)

k.swapnil
k.swapnil

Reputation: 139

Please look into this:

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 if you need any more help with that :)

Edit: Here is a jsfiddle with a test I built a while before. I've updated it with comments so you should see what's going on there. Maybe a JavaScript pro would want to hit me for this, but it's working for my purpose and it seems to work. I haven't tested it in older browsers though, since it's a personal project and I'm not going the "optimizing for IE way" there.

Upvotes: 6

Related Questions