当我保持对连续将对象拖有时在移动后 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); |
以上所述就是本文的全部内容了，希望大家能够喜欢。
