拖动顶部的另一个元素后，JQuery UI使之前的状态变为原始状态

Question

假设元素r1被错误拖入td1，所以当我将r2元素拖入td1时，它应该使r1元素进入原始位置。所以基本上哪一个被拖在顶部停留在droppable中，另一个则回到原始状态。

希望足够清楚。

任何提示都会有所帮助。

$('#r1').draggable({
  revert: true
});
$('#r2').draggable({
  revert: true
});

$('#td1').droppable({
  accept: "#r1,#r2",
  drop: function(e, ui) {
    $(this).html(ui.draggable.remove().html());
    $(this)
      .addClass("ui-state-highlight")
  }
});

Answer 1

选中此https://plnkr.co/edit/FlxBSsPZovnWyIs9TxXu?p=preview

    $(function(){
          var dragid, previd;
         $( ".draggable" ).draggable({
          drag: function(e, ui){
           dragid = $(this).attr('id');
          } 
         });

          $( ".droppable" ).droppable({
              drop: function( event, ui ) {
                  if( $(".droppable").hasClass('hasele')){
                     $('#'+previd).css({'top' : 0, 'left' : 0, 'position': 'relative'});
                  } else{
                    $(".droppable").addClass('hasele');
                    $('#'+dragid).addClass('dropped');
                  }
                  previd = dragid;
              }
            });

        });