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

Question

我实际上有两个问题,标题中的主要是主要问题.我在页面上有多个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();
}

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

Answer 2

这应该适用于在悬停时添加突出显示.

$('.drop_div').droppable({
     hoverClass: "highlight",
     drop: handle_drop_patient,
});

然后创建一个用于突出显示的css类,用于设置边框或更改背景颜色或任何您想要的颜色.

.highlight {
    border: 1px solid yellow;
    background-color:yellow;
}

就位置而言,一旦跌落完成,您可以重新应用css.

function handle_drop_patient(event, ui) {
     $(this).append( $(ui.draggable).clone().css({'float':'left','display':'block'}) );
     $(ui.draggable).remove();
}

Answer 3

仅供参考：hoverClass已被弃用，以支持classes选项。现在应该是：

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