织物js画布被复制（连续拖动后）

Question

我在将对象添加到画布时看到意外错误，我看到重复的对象在页面上的某些位置创建。仅当将对象连续拖动到可放置区域时，才会出现此问题

我被困住了，找不到解决方案

完整的代码： http ： //liveweave.com/f9z1Bq

我的想法

1：当将对象连续拖到画布上时：a：当我将第一个对象拖到画布对象上而根本不还原时，第二个对象也拖到画布上时，第一个对象卡在画布上，控制台中出现以下错误

Uncaught TypeError：无法读取null的属性'alt'：脚本停止或Uncaught TypeError：无法读取null的属性'tittle'：Script停止并且也不能使用第一个对象

或abc.com/alldevice/undefined 404（未找到）

2：我认为某些时间拖动事件在快速拖动或??时无法获取对象。

请帮我解决

Answer 1

参见以下代码，您必须进行相应的编辑：参见此小提琴： http : //jsfiddle.net/5190m4Lw/

fabric.Image.fromURL('/assets/pug.jpg', function (img) {
    var img1 = img.scale(0.1).set({ left: 100, top: 100 });

    fabric.Image.fromURL('/assets/pug.jpg', function (img) {
        var img2 = img.scale(0.1).set({ left: 175, top: 175 });

        fabric.Image.fromURL('/assets/pug.jpg', function (img) {
            var img3 = img.scale(0.1).set({ left: 250, top: 250 });

            canvas.add(new fabric.Group([img1, img2, img3], { left: 200, top: 200 }))
        });
    });
});

Answer 2

更改

$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);

Answer 3

在这里查看链接

织物js画布被复制（连续拖动后）

 var image =$draggedImage&& $draggedImage.src

至

$draggedImage = ui.draggable.find("img").get(0);