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

时间:2022-01-14 23:42:33

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

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

为什么会发生呢,我们如何防止?

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
(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();   
    }
 
  }
})();

解决方法

更改

?
1
2
3
4
5
6
$drop.droppable({
  over: function (event, ui) {
    $(this).addClass('active');
  },
  drop: function (event, ui) {
    var image =$draggedImage&& $draggedImage.src;

?
1
2
3
4
5
6
$drop.droppable({
    over: function(event, ui) {
      $(this).addClass('active');
    },
    drop: function(event, ui) {
      $draggedImage = ui.draggable.find("img").get(0);

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