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

实际上我有两个问题，标题中的问题是主要问题。我在页面上有多个div元素标记为可拖放。在这些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();
}

退房

例：

---

这应该适用于在悬停时添加高光

$('.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();
}

仅供参考：已被弃用以支持期权。现在应该是：

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

---

你看过了吗？是的，很明显。我会把它作为一个答案贴出来。+1感谢你写了“放下：处理放下病人”。非常感谢，我现在知道我可以编写一个函数并将其名称放在那里，而不是完整的实现，例如匿名函数。

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