我正在关注jQuery draggable item的this guide。
我唯一想念的是使用临时元素CSS的dragenter
和dragleave
事件。当可拖动元素在其上移动时,它仅为可放置元素提供hoverClass
属性。如果我们需要更改其他元素的CSS怎么样?
当前代码如下所示:
$(".part").draggable({
start: startDrag,
stop: stopDrag,
revert: true
});
$(".parts-action").droppable({
accept: '.part',
hoverClass: 'hovered',
drop: handleDrop
});
除此之外,我还需要:
$(".wrapper").on('dragenter', function (e) {
$(this).next(".parts-action").show();
});
$(".wrapper").on('dragleave', function (e) {
$(this).next(".parts-action").hide();
});
但是在使用draggable()
时它不起作用。
我也尝试过:
$(".part").draggable({
drag: handleDrag
})
function handleDrag(e, ui){
/* how to know if active draggable is on some element other than droppable? */
}
这非常令人困惑,因为它与可拖动和可拖放相关联!
答案 0 :(得分:5)
我不是100%确定我完全理解您的问题以及您需要做什么,但如果您需要更改其他元素的CSS,那么您可以使用over
和out
事件处理程序。看看jQueryUI documentation for Droppable。你基本上想要在over
事件触发时添加一个类,并在out
事件触发时删除该类。
<强> HTML 强>
<div class="ui-widget-content part">
<p>Drag me to my target</p>
</div>
<div class="ui-widget-header parts-action">
<p>Droppable area 1</p>
</div>
<div class="ui-widget-header parts-action">
<p>Droppable area 2</p>
</div>
<div class="ui-widget-header parts-action">
<p>Droppable area 3</p>
</div>
<强> CSS 强>
.parts-action { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
.part { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
.parts-action-highlight { background: red; }
<强>的jQuery 强>
$(function() {
$( ".part" ).draggable();
$( ".parts-action" ).droppable({
accept: ".part",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$(this)
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
},
over: function( event, ui ) {
$(this)
.siblings(".parts-action")
.addClass("parts-action-highlight");
},
out: function( event, ui ) {
$(this)
.siblings(".parts-action")
.removeClass("parts-action-highlight");
}
});
});
上面的大部分代码示例都来自jQueryUI droppabe示例,因此ui-widget-XXX类不需要/与您相关,只需留下来突出显示效果。
只需用您需要采取的任何操作替换函数调用的主体,例如
over: function( event, ui ) {
$(this)
.siblings(".parts-action")
.hide();
},
out: function( event, ui ) {
$(this)
.siblings(".parts-action")
.show();