Question

长时间读者，第一次海报。我正在创建一个带有JQuery拖放div的网页，并且想知道如果一个可拖动的div被放置在“droppable”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');
    }
});

然后在脚本中调用droppable部分 -

$(".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事件附加到

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

我意识到第一部分创建了“draggable”类，它成为“ui-draggable-dragging”的一部分。有没有一种方法可以触发另一个类“指示符”，而不会在执行drop：function时调用该事件？

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

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

希望这会对你有帮助..

如何将可拖动父div的子/子div更改为其他类？

1 个答案: