Question

所以我有多个draggables和多个droppables。当所有droppable都有可拖动功能时，它会运行一个功能并允许用户重置页面。此时，这只是使用jQuery .css函数来更改顶部和左侧CSS。我怎样才能让droppable字段再次可以删除？

即。我希望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

根据您的代码，您似乎只使用了“删除 - 突出显示”的存在。用于表示其中一个行星掉落在目标上的类。

您应该能够从每个目标中删除该类，以重新启用他们的＆＃39; droppable＆＃39;状态：

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

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

1 个答案: