drappable div内のdraggable要素を別のdraggable要素に置き換えます

Question

drappable要素をdrappable要素の別のdraggable要素で置き換えようとしています。たとえば、drag1がdiv1にあり、drag2がdiv1にドラッグされた場合、drag1はdiv2が出ているdivに実行され、drag1はdiv1にあります。私のデモではdrag2が拒否されます。どうすればそれを実現できますか？これについて

demo

function handleDropEvent (event, ui) { 
    if (ui.draggable.element !== undefined) { 
     ui.draggable.element.droppable('enable'); 
    } 
    $(this).droppable('disable'); 
    ui.draggable.position({of: $(this),my: 'left top',at: 'left top'}); 
    ui.draggable.draggable('option', 'revert', "invalid"); 
    ui.draggable.element = $(this); 
} 

Answer 1

どのように？

JsFiddle

この例では、3つのdiv、drag-goalため戦う2です。 基本的には、handleConflict(jQueryElement)は、要素がターゲットdivのすぐ上にあるかどうかを調べます。存在する場合、要素がターゲットとして設定されていません。-itは、それを「設定済み」として引き継ぎます。今、occupyingelementが設定されている（私は、 "それを超えている"） - それは古い要素を元の場所にするよう強制されます。

var occupyingSpace = "null";

function handleConflicts(element){ 

    console.log($("#drag-goal").position()); 
    console.log(element.position()); 

    if(element.position().top == $("#drag-goal").position().top && 
       element.position().left == $("#drag-goal").position().left && occupyingSpace == "null"){ 
     occupyingSpace = element; 
     console.log("defined occupyingSpace as this element") 
    } 
    else if(element.position().top == $("#drag-goal").position().top && 
       element.position().left == $("#drag-goal").position().left && occupyingSpace != "null"){ 
     occupyingSpace.css({ 
      left: 0, 
      top: 0, 
     }) 
     occupyingSpace = element; 
     console.log("is taken"); 
    } 

}