別の要素を上にドラッグした後のJQueryのUI

Question

要素r1が誤ってtd1にドラッグされることがあるので、r2要素をtd1にドラッグするとr1要素が元の位置に移動するはずです。だから、基本的にどちらがトップにドラッグされているかは、ドロップ可能にとどまり、もう一方は元の状態に戻ります。

十分に明確です。

ヒントがあれば助かります。

$('#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; 
       } 
      }); 

     });