ドラッグ可能な要素を回転させたときのドラッグ可能な包含バグ

Question

ドラッグ可能な要素があります。ドラッグ可能な要素もあり、サイズ変更と回転が可能です。これらの回転はCSS変換によって処理されますが、要素が回転すると、ドラッグ可能な機能が制御不能になります。

相続人（更新）フィドル：Click me

私は何を考えて起こることは要素が回転すると、それだけの角度で、高さと幅は明らかに同じままであるということです、しかし、jQueryのを考慮していませんその要素がそれが通常の水平方向であると考えさせ、その結果、上記のフィドルで示された「バグ」が生じます。答えのための野生のガチョウの追跡で

、私は、これはトリックを行うだろうとどこかで読ん：

refreshPositions: true, 

をしかし、それは動作しませんでした。また、要素のdraggable関数を破棄して再初期化しませんでした。これを修正する方法はありますか？それで封じ込めは正常に機能し、jQueryは回転を認識させますか？

ありがとうございました。

Answer 1

1つの選択肢は、あなた自身の封じ込めを処理することです。これを行うための1つの方法があります。

私は回転した要素の高さと幅を取得するためにgetBoundingClientRectを使用しています。これらの値を使って、ドラッグされた要素が親コンテナとの関係でどこにあるのかを知ることができます。

var boundingContainer, boundingDraggable, prevLeft, prevTop; 

$(".draggable").draggable({ 
    classes: { 
    "ui-draggable-dragging": "highlight-draggable" 
    }, 
    start: function(event, ui) { 
    boundingDraggable = ui.helper[0].getBoundingClientRect(); 
    boundingContainer = ui.helper.closest('#draggableContainer')[0].getBoundingClientRect(); 
    }, 
    drag: function(event, ui) { 

    if(ui.offset.left <= boundingContainer.left){ 
     if(ui.position.left < prevLeft){ 
      ui.position.left = prevLeft; 
     } 
    } 

    if(ui.offset.top <= boundingContainer.top){ 
     if(ui.position.top < prevTop){ 
      ui.position.top = prevTop; 
     } 
    } 

    if(ui.offset.left+boundingDraggable.width >= boundingContainer.right){ 
     if(ui.position.left > prevLeft){ 
      ui.position.left = prevLeft; 
     } 
    } 

    if(ui.offset.top+boundingDraggable.height >= boundingContainer.bottom){ 
     if(ui.position.top > prevTop){ 
      ui.position.top = prevTop; 
     } 
    } 

    prevLeft = ui.position.left; 
    prevTop = ui.position.top; 
    } 
}); 

Fiddle