拖放jquery不起作用

drag and drop jquery not working

本文关键字：不起作用 jquery 拖放      更新时间：2023-09-26

我正试图将箱子从男子拖到汽车顶部，目标div称为"droptable"。这似乎在从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");

    }
});

})；

有人能帮我吗？

在三个框被拖到汽车顶部后，我想触发汽车图像的更改，并更改文本。

对这个问题的任何部分都有帮助将是非常好的。谢谢Dan

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

以下是jQueryUI绑定到项目中的相同示例（并稍微清理了代码，以避免浪费代码为所有元素调用draggable）：http://jsfiddle.net/9JTSQ/11/

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

我刚刚在"外部资源"中从其CDN绑定了jQueryUI

相关文章：