android连续拖动导致挂起的解决方法

当我保持对连续将对象拖有时在移动后 5 6 拖/滴，看到有时不获取对象还原不回来，我不能用于以后。

基本上我有对两个对象组的 canvas 在 time 可以有最大的两个图像不是更多比，也看到图像

为什么会发生呢，我们如何防止？

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

}
})();

解决方法

更改

$drop.droppable({
 over: function (event, ui) {
   $(this).addClass('active');
 },
 drop: function (event, ui) {
   var image =$draggedImage&& $draggedImage.src;

为

$drop.droppable({
   over: function(event, ui) {
     $(this).addClass('active');
   },
   drop: function(event, ui) {
     $draggedImage = ui.draggable.find("img").get(0);

以上所述就是本文的全部内容了，希望大家能够喜欢。