javascript - 如何将可拖动父 div 的子/子 div 更改为不同的类？

Question

长期读者，第一次海报。我正在创建一个带有 JQuery 拖放 div 的网页，我想知道如何制作它，所以一旦将可拖动的 div 放在“可放置”div 上，不仅可拖动 div 的类发生了变化，而且一个draggable 中的子 div 是否更改为不同的类？

HTML 基本上是-

<div class="dropbox"></div>

然后 JQuery 脚本是-

<script type='text/javascript'>//<![CDATA[
$(function(){
$("#draggable").draggable({
drag: function(event, ui) {
    $(this).removeClass('dropClass');
    }
});

然后像稍后在脚本中那样调用可放置部分-

$(".dropbox").droppable({
tolerance: 'intersect',
over: function(event, ui) {
    $('.ui-draggable-dragging').addClass('hoverClass');
},
out: function(event, ui) {
    $('.ui-draggable-dragging').removeClass('hoverClass');
},
drop: function(event, ui) {
    $('.ui-draggable-dragging').removeClass('hoverClass').addClass('dropClass');
}
});

如果 draggable 的子 div 有一个名为“indicator”的类，有没有办法将 drop: function 事件附加到 include

$('.indicator').removeClass('hoverClass').addClass('setOn');

我意识到第一部分创建了“可拖动”的类，它成为“ui-draggable-dragging”的一部分。有没有一种方法可以在没有事件的情况下触发另一个类“指示器”，我可以在执行 drop: 函数时调用该事件？

希望这是有道理的，我在其他地方找不到答案。

Answer 1

试试这个 JavaScript ..

$("#draggable").draggable({
    drag: function(event, ui) {
        $(this).removeClass('dropClass');
        $(this).children('.indicator').removeClass('setOn');
    }
});



$(".dropbox").droppable({
    tolerance: 'intersect',
    over: function(event, ui) {
        $('.ui-draggable-dragging').addClass('hoverClass');
    },
    out: function(event, ui) {
        $('.ui-draggable-dragging').removeClass('hoverClass');
    },
    drop: function(event, ui) {
        $('.ui-draggable-dragging').removeClass('hoverClass').addClass('dropClass');
        $('.ui-draggable-dragging').children('.indicator').addClass('setOn');
    }
});

希望这对你有帮助..