Question

当我收到错误未捕获TypeError：无法读取null的属性'alt'，我的脚本在浏览器中正常工作但有时我看到拖动的对象在我通过设备检查时卡住了我看到belwo错误

我的脚本停止执行我如何防止这种情况?? ..

(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();       
        }

    }


})();

Answer 1

我认为这个问题是因为你正在从你在draggables start事件中设置的变量访问drop handler中的拖动元素，而这反过来又会让你回到null。处理程序。

您不需要这样做，您可以从drop事件回调参数中访问已删除的元素。此外，您无需更改可拖动的start，stop回调中的droppable CSS，您可以使用droppable本身的activate和deactivate选项。

可拖动 - 可放置交互的代码应该是以下几行：

$(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) {
         $drop.css('display','block')
        },
       stop: function () {
         $(this).find('img').css({
           /* 'opacity': 0.4 */
         });
        },
        revert: true
    });

    /* Define the events for droppable properties */
    $drop.droppable({
        over: function (event, ui) {
            $(this).addClass('active');
        },
        drop: function (event, ui) {
            var image = ui.draggable.find("img").get(0);
            img_to_canvas(image, image.alt,$(event.target).is("#canvas-drop-area")?1:2);
        },
        out: function (event, ui) {
            $(this).removeClass('active');
        },
        deactivate: function (event, ui) {
            $(this).removeClass('active').css("display","none");
        }
    });

});

未捕获的TypeError：无法读取属性＆＃39; alt＆＃39; of null：脚本停止

1 个答案: