当我保持对连续将对象拖有时在移动后 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);

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

标签分类：

上一篇：上一篇：Android实现本地上传图片并设置为圆形头像
下一篇： 下一篇：android防止提交事件时触发多个表单中的按钮