sortable - 如何使用jquery ui draggable突出顯示懸停時的可放置區域




jquery ui draggable destroy (2)

我實際上有兩個問題,標題中的主題是主要問題。 我在頁面上有多個div元素標記為droppable。 在這些div元素中,我有標記為可拖動的跨度。 我想要它,所以當你拖動一個元素時,它會懸停在一個可放置的區域上,該區域要么突出顯示,要么有邊框,所以他們知道可以將它放在那裡。

作為次要問題,我的所有可拖動元素都有一個顯示:塊,寬度和浮動,因此它們在我的可放置區域看起來很漂亮。 當物品掉落時,他們似乎得到了一個位置設置,因為它們不再像我的其他物品一樣漂亮漂亮。 供參考,這是我的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();
}

僅供參考: hoverClass已被棄用,有利於classes選項。 現在應該是:

$('.drop_div').droppable({
    classes: {
      'ui-droppable-hover': 'highlight'
    },
    drop: handle_drop_patient
});

查看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!" );
    }
});




jquery-ui-droppable