长期读者,第一次海报。我正在创建一个带有 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: 函数时调用该事件?
希望这是有道理的,我在其他地方找不到答案。
最佳答案
试试这个 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');
}
});
希望这对你有帮助..
关于javascript - 如何将可拖动父 div 的子/子 div 更改为不同的类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37289362/