android連續拖動導致掛起的解決方案_Android

來源:互聯網
上載者:User

當我保持對連續將對象拖有時在移動後 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);

以上所述就是本文的全部內容了,希望大家能夠喜歡。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.