jquery - 如何使用 jquery ui Draggable 突出显示悬停时的可放置​​区域

Question

我实际上有两个问题，标题中的 on 是主要问题。我在页面上有多个标记为可放置的 div 元素。在这些 div 元素内，我有标记为可拖动的跨度。我希望这样，当您拖动一个元素并将其悬停在可放置区域上时，该区域要么突出显示，要么具有边框，以便他们知道可以将其放置在那里。

作为第二个问题，我所有的可拖动元素都有一个显示: block 、一个宽度和一个 float ，因此它们在我的可放置区域中看起来漂亮整洁。当元素掉落时，它们似乎会被设置一个位置，因为它们不再像我的其他元素一样漂浮得很好且整齐。作为引用，这是我的 JavaScript。

$('.drag_span').draggable({
    revert: true
});
$('.drop_div').droppable({
    drop: handle_drop_patient
});

function handle_drop_patient(event, ui) {
    $(this).append($(ui.draggable).clone());
    $(ui.draggable).remove();
}

Answer 1

查看http://jqueryui.com/demos/droppable/#visual-feedback .

例如:

$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {
        $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
                .html( "Dropped!" );
    }
});
$( "#draggable2" ).draggable();
$( "#droppable2" ).droppable({
    accept: "#draggable2",
    activeClass: "ui-state-hover",
    drop: function( event, ui ) {
        $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
                .html( "Dropped!" );
    }
});