34

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

作为第二个问题，我所有的可拖动元素都有一个 display:block、一个宽度和一个浮点数，所以它们在我的可放置区域看起来很漂亮和整洁。当物品被丢弃时，它们似乎被设置为它们的位置，因为它们不再像我的其他物品那样漂亮而整洁。作为参考，这是我的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();
}
4

3 回答 3

48

查看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!" );
    }
});
于 2012-03-26T20:49:21.660 回答
18

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

$('.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();
}
于 2012-03-26T21:00:14.570 回答
9

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

$('.drop_div').droppable({
    classes: {
      'ui-droppable-hover': 'highlight'
    },
    drop: handle_drop_patient
});
于 2016-10-21T14:06:24.803 回答