Jquery Drag Drop hängt oder wird für Android Browser stecken

Siehe unten Link http://liveweave.com/JckSgC

Wenn ich versuche zu ziehen Drop-Artikel Artikel wird irgendwo auf mobilen Bildschirm stecken, ohne auf droppable Bereich fallen gelassen,

Und wenn ich irgendwo klicke und schau es anfängt zu arbeiten (das ist grundsätzlich passiert, sobald ich die Seite zum ersten Mal öffne)

Was könnte das Problem sein und wie kann ich das lösen?

Unten ist 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(); } } })(); 

One Solution collect form web for “Jquery Drag Drop hängt oder wird für Android Browser stecken”

Wenn Sie JQuery verwenden, verwenden Sie die folgende Javascript-Bibliothek namens Touchpunch und stellen Sie sicher, dass Sie es einschließen, nachdem Sie JQuery einschließen.

http://touchpunch.furf.com/

Ich erinnere mich an eine Menge Probleme mit einer Drag & Drop-Anwendung beim Testen auf mobilen Geräten, bis ich mit Touchpunch begann.

Das Android ist ein Google Android Fan-Website, Alles ├╝ber Android Phones, Android Wear, Android Dev und Android Spiele Apps und so weiter.