android连续拖动导致挂起的解决方法
程序员文章站
2022-08-17 18:08:17
当我保持对连续将对象拖有时在移动后 5 6 拖/滴,看到有时不获取对象还原不回来,我不能用于以后。
基本上我有对两个对象组的 canvas 在 time 可以有最大的...
当我保持对连续将对象拖有时在移动后 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);
以上所述就是本文的全部内容了,希望大家能够喜欢。