所以我有多个 draggables 和多个 droppables。当所有 droppables 中都有一个 draggable 时,它会运行一个函数并允许用户重置页面。目前,这只是使用 jQuery .css 函数来更改顶部和左侧的 CSS。我怎样才能使可放置的字段再次变为可放置的?
即我想要一个 for 循环在每个 droppable 上使用 $(this)。
$('.planets').draggable({
opacity: .4,
create: function(){$(this).data('position',$(this).position())},
cursorAt:{left:15},
cursor:'move',
start:function(){$(this).stop(true,true)},
revert : 'invalid'
});
$('.targets').droppable({
drop: function( event, ui ) {
if(!$(this).hasClass('dropped-highlight')){
$( this ).addClass( "dropped-highlight" );
$(this).droppable('option', 'accept', ui.draggable);
}
},
out: function( event, ui ) {
$(this).droppable('option', 'accept', '.planets');
$(this).removeClass( "dropped-highlight" );
}
});
然后有一个不同的函数,如果单击重置按钮,它会更改可拖动对象的顶部和左侧。
最佳答案
根据您的代码,您似乎只是在使用 'dropped-highlight' 类的存在来指示其中一颗行星已落在目标上。
您应该能够从每个目标中删除该类以重新启用它们的“可转换”状态:
$('.targets').removeClass('dropped-highlight');
关于javascript - 使用 .css 移动对象后,重置所有可放置对象以允许可拖动对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23529971/