拖放jQuery不起作用

Question

我正在嘗試將盒子從人拖到汽車的頂部，目標div稱為“可放下”。 從Dreamweaver進行預覽時似乎可行，但在jsfiddle中進行預覽時則無效：

http://jsfiddle.net/dantest2014/9JTSQ/7/

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


    }

});

}）;

有人可以幫我弄這個嗎？

將三個方框拖到汽車頂部后，我想觸發汽車圖像的更改並更改文本。

對這個問題的任何部分的任何幫助將是巨大的。 謝謝！ 擔

Answer 1

為了在JSFiddle上預覽它，您首先需要在項目上實現jQueryUI（不僅僅是jQuery）。

這是將jQueryUI綁定到您的項目中的同一示例（並清理了一些代碼以免浪費代碼調用所有元素的可拖動對象）： http : //jsfiddle.net/9JTSQ/11/

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

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

我只是將jQueryUI從其CDN綁定到“外部資源”中