使用 .css 移动对象后，重置所有可放置对象以允许可拖动对象

Question

所以我有多个 Draggables 和多个 droppables。当所有的 droppable 中都有一个可拖动的对象时，它会运行一个函数并允许用户重置页面。目前，这只是使用 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" );
  }
});

然后有一个不同的函数，如果它们单击重置按钮，它会改变可拖动对象的顶部和左侧。

Answer 1

根据您的代码，您似乎只是在使用“dropped-highlight”类的存在来指示其中一颗行星已落在目标上。

您应该能够从每个目标中删除该类以重新启用它们的“可放置”状态：

$('.targets').removeClass('dropped-highlight');