Javascript 未捕获类型错误：无法读取属性'；alt'；空值：脚本停止

当我得到错误UncaughtTypeError:无法读取null的属性'alt'，我的脚本在浏览器中工作正常，但有时我会在通过设备检查时看到拖动的对象被卡住，除非我看到了belwo错误

我的脚本停止执行我如何才能阻止它

看

---

我认为问题是因为您正在从Dragables start事件中设置的变量访问drop处理程序中的Draged元素，而Dragables start事件中设置的变量又在其停止处理程序中设置为

null

不需要这样做，您可以从drop事件回调参数访问被删除的元素。此外，您不需要从Dragable的

开始

，

停止

回调更改Dropable的CSS，您可以使用Dropable本身的

激活

和

停用

选项

可拖放交互的代码应该如下所示：

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

});

---

$draggedImage&&$draggedImage.src

有什么作用？要更改画布中的图像url，您希望上面的语句有什么作用。。？您是否正在尝试将

放入拖动的元素中？是的，我正在尝试用新的元素在画布上替换图像是的，但为什么此问题主要发生在移动浏览器中？？？@mour可能移动浏览器中

drop

和

stop

回调的执行顺序不同。。？如果您从callbacks参数访问droppables，那么您就不必担心这些问题。。。这就是为什么jQuery ui给出了这个参数……您做了哪些更改？？？@mour我没有使用变量

$draggedImage

并在draggables

start

和

stop

中设置它的值来跟踪draggable，相反，通过

ui.draggable

在

drop

回调中访问它…当我快速拖动它时，我能够在chrome中看到相同的问题可能是什么问题请帮助

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

});