Javascript 拖放jquery不工作

我正试着把箱子从那个男人拖到车顶上，目标是一个叫“可放下的”。这在从Dreamweaver预览时似乎有效，但在JSFIDLE中预览时则无效：

}))

有人能帮我吗

在三个盒子被拖到汽车顶部后，我想触发汽车图像的改变，同时也改变文本

对这个问题的任何部分都会有很大的帮助。 谢谢

---

Dan

为了在JSFIDLE上预览它，您首先需要在项目上实现jQueryUI（不仅仅是jQuery）

下面是jQueryUI绑定到项目中的同一个示例（并稍微清理了代码，以避免浪费调用所有元素的可拖动代码）：

---

我刚刚从它的“外部资源”中绑定了jQueryUI，可拖动/可拖放是jQueryUI特性，它没有包含在您的JSFIDLE预览中，哈，这是如何工作的…？这是有道理的，因为我在dreamweaver中包含了CDN的代码，而不是JSFIDLE。非常感谢！太好了，它可以帮助你。从现在开始，试着像类一样使用常规选择器来管理具有相同脚本的所有元素。如果您有特定的选择器，如ID，则可以将它们连接到单个jQuery选择器中，如：$（“#ID1，#ID2，#ID3”）.method（）；

$(function () {

var dfd1 = $.Deferred();
var dfd2 = $.Deferred();


$("#lft_box_layer").draggable({
    revert: "invalid",
    cursor: "move"
});
$("#rgt_box_layer").draggable({
    revert: "invalid",
    cursor: "move"
});
$("#btm_box_layer").draggable({
    revert: "invalid",
    cursor: "move"
});

$("#droppable").droppable({

    accept: "#lft_box_layer, #rgt_box_layer, #btm_box_layer",



    // tolerance can be set to 'fit', 'intersect', 'pointer', or 'touch'
    tolerance: 'intersect',
    // Add .hoverClass whenever #draggable is being hovered over #droppable
    over: function (event, ui) {
        $('.ui-draggable-dragging').addClass('hover');
    },
    // Remove .hoverClass whenever #draggable is no longer hovered over #droppable
    out: function (event, ui) {
        $('.ui-draggable-dragging').removeClass('hover');
    },
    // Add .dropClass whenever #draggable is dropped on #droppable
    drop: function (event, ui) {
        $('.ui-draggable-dragging').removeClass('hover').addClass('drop');


        $('.ui-draggable-dragging').draggable('option', 'disabled', true);


        $("#car").attr('src', "images/removals-car-break.jpg");


    }

});

    $(".toDrag").draggable({
        revert: "invalid",
        cursor: "move"
    });

    $("#droppable").droppable({    
        accept: ".toDrag",
        .....................    
    });