Jquery drag drop freezes or gets stuck in android browser

Question

see link below http://liveweave.com/JckSgC

when I try to drag item items, I’m stuck somewhere on the screen of a mobile phone, not dropping into the drop area,

and when I click somewhere and on the screen, it starts working (this basically happens as soon as I open the page for the first time)

What could be the problem and how to solve it?

below is the code

js code

(function () { var canvas = new fabric.Canvas('canvas'); var canvas_el = document.getElementById('canvas'); var canvas1 = new fabric.Canvas('canvas1'); var group; fabric.Image.fromURL('img/blank.png', function (img) { var img1 = img.set({ left: 0, top: 0 }); fabric.Image.fromURL('img/blank.png', function (img) { var img2 = img.set({ left: 0, top: 0 }); group = new fabric.Group([img1, img2], { left: 0, top: 0 }); canvas.add(group) }); }); fabric.Image.fromURL('img/blank.png', function (img) { var img1 = img.set({ left: 0, top: 0 }); fabric.Image.fromURL('img/blank.png', function (img) { var img2 = img.set({ left: 0, top: 0 }); group1 = new fabric.Group([img1, img2], { left: 0, top: 0 }); canvas1.add(group1) }); }); $(document).ready(function () { /* Define drag and drop zones */ var $drop = $('#canvas-drop-area,#canvas-drop-area1'), $gallery = $('td > #image-list li'), $draggedImage=null; /* Define the draggable properties */ $gallery.draggable({ helper: 'clone', start: function (e) { $draggedImage=event.target; $drop.css({ 'display': 'block' }) }, stop: function () { $(this).find('img').css({ /* 'opacity': 0.4 */ }); $drop.css({ 'display': 'none' }); $draggedImage=null; }, revert: true }); /* Define the events for droppable properties */ $drop.droppable({ over: function (event, ui) { $(this).addClass('active'); }, drop: function (event, ui) { var image =$draggedImage&& $draggedImage.src; console.log($draggedImage.alt); img_to_canvas(image,$draggedImage.alt,$(event.target).is("#canvas-drop-area")?1:2); }, out: function (event, ui) { $(this).removeClass('active'); }, deactivate: function (event, ui) { $(this).removeClass('active'); } }); }); var img_to_canvas = function(image,sendfront,checkcanvas) { var img = new Image(); img.src = image; if(checkcanvas =='1'){ if(sendfront=='top'){ fabric.util.loadImage(img.src, function (img) { group.item(0).setElement(img); canvas.renderAll(); }); }else{ fabric.util.loadImage(img.src, function (img) { group.item(1).setElement(img); canvas.renderAll(); }); } canvas.calcOffset(); }else{ if(sendfront=='top'){ fabric.util.loadImage(img.src, function (img) { group1.item(0).setElement(img); canvas1.renderAll(); }); }else{ fabric.util.loadImage(img.src, function (img) { group1.item(1).setElement(img); canvas1.renderAll(); }); } canvas1.calcOffset(); } } })(); 

Answer 1

If you are using jQuery, try using the following javascript library called touchpunch and make sure you turn it on after you enable jQuery.

http://touchpunch.furf.com/

I remember that I had a lot of problems with the drag and drop application when testing on mobile devices, until I started using touchpunch.