如何使用 jquery ui draggable 在悬停时突出显示可放置区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9879414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I highlight a droppable area on hover using jquery ui draggable
提问by Jhorra
I actually have two questions, the on in the title being the main one. I have multiple div elements on the page marked as droppable. Inside these div elements I have spans that are marked as draggable. I want it so when you are dragging an element and it is hovered over a droppable area that area either highlights or has a border so they know they can drop it there.
我实际上有两个问题，标题中的 on 是主要问题。我在页面上有多个 div 元素标记为 droppable。在这些 div 元素中，我有标记为可拖动的跨度。我想要它，所以当你拖动一个元素并且它悬停在一个可放置的区域上时，该区域要么突出显示要么有边框，这样他们就知道可以将它放在那里。
As secondary question, all my draggable elements have a display:block, a width and a float on them, so they look nice and neat in my droppable areas. When items are dropped they seem to get a position set to them as they no longer float nice and neat like the rest of my items. For reference, here is my javascript.
作为第二个问题，我所有的可拖动元素都有一个 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();
}
回答by j08691
Check out http://jqueryui.com/demos/droppable/#visual-feedback.
查看http://jqueryui.com/demos/droppable/#visual-feedback。
Ex:
前任：
$( "#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!" );
}
});
回答by J. Celestino
This should work for adding a highlight on hover.
这应该适用于在悬停时添加突出显示。
$('.drop_div').droppable({
hoverClass: "highlight",
drop: handle_drop_patient,
});
Then create a css class for highlightthat sets the border or changes the background color or whatever you'd like.
然后为突出显示创建一个 css 类，用于设置边框或更改背景颜色或您喜欢的任何内容。
.highlight {
border: 1px solid yellow;
background-color:yellow;
}
As far as the position is concerned you can reapply css once the drop is complete.
就位置而言，您可以在放置完成后重新应用 css。
function handle_drop_patient(event, ui) {
$(this).append( $(ui.draggable).clone().css({'float':'left','display':'block'}) );
$(ui.draggable).remove();
}
回答by Damien Roche
FYI: hoverClasshas been deprecated in favour of classesoption. It should now be:
仅供参考：hoverClass已被弃用，以支持classes选项。现在应该是：
$('.drop_div').droppable({
classes: {
'ui-droppable-hover': 'highlight'
},
drop: handle_drop_patient
});
