jquery - 拖放到特定的 div 后拖放更改样式

Question

我在以下位置找到了不错的脚本:http://jsfiddle.net/wfG3L/554/ ，它是关于拖放的。

如果我将 .card 类放入 .stackDrop1 或 .stackDrop2 并在放入 #launchPad 后将其归还，我想更改类 .card 的宽度或高度。

谁能帮帮我？我真的很感激。

$("#launchPad").height($(window).height() - 20);
var dropSpace = $(window).width() - $("#launchPad").width();
$("#dropZone").width(dropSpace - 10);
$("#dropZone").height($("#launchPad").height());

$(".card").draggable({
    appendTo: "body",
    cursor: "move",
    helper: 'clone',
    revert: "invalid",
});

$("#launchPad").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        $("#launchPad").append($(ui.draggable));
    }
});

$(".stackDrop1").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $(this).append($(ui.draggable));

    }
});

$(".stackDrop2").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $(this).append($(ui.draggable));
    }
});

Answer 1

试试这个 CSS:

.stack .card.ui-draggable
{
    background-color:orange;
}