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

Question

我在向画布添加对象时看到意外错误我看到在页面上的某个位置创建了重复的对象。此问题仅在对象被连续拖入可放置区域时发生

我被卡住了，找不到解决办法

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

我的想法

1: 当对象被连续拖到画布上时 a：当我将第一个对象拖到画布对象并且根本没有恢复并且第二个对象也被拖动时，第一个对象被卡在画布上，控制台中出现以下错误

未捕获的类型错误：无法读取 null 的属性“alt”：脚本停止 或者 未捕获的类型错误：无法读取 null 的属性“标题”：脚本停止 并且第一个对象也不能使用

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

2：我认为有些时间拖动事件在快速拖动时无法获取对象？？..

请帮我解决一下

Answer 1

在此查看链接

fabric js canvas getting duplicated (after continous drag )

 var image =$draggedImage&& $draggedImage.src

到

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

Answer 2

看下面的代码，你得照着走 编辑：看这个小提琴：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 3

改变

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