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

Posted 2023-05-08

【中文标题】如何使用 jquery ui 可拖动突出显示悬停时的可放置​​区域

【英文标题】：How do I highlight a droppable area on hover using jquery ui draggable

【发布时间】：2012-04-10 09:16:59

【问题描述】：

我实际上有两个问题，标题中的 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();

【问题讨论】：

你看过jqueryui.com/demos/droppable/#visual-feedback

就是这样，太明显了。

我会把它作为答案发布。

【参考方案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!" );
    
);

【参考方案2】：

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

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

然后为 highlight 创建一个 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();

【讨论】：

+1 感谢您撰写“drop：handle_drop_patient”。谢天谢地，我现在知道我可以编写一个函数并将其名称放在那里，而不是像匿名函数这样的完整实现。

【参考方案3】：

仅供参考：hoverClass 已被弃用，取而代之的是 classes 选项。现在应该是：

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