可拖動元素旋轉時可拖動的容器錯誤

我有一個可拖動的元素，它也可調整大小和旋轉。這些旋轉是由CSS轉換處理的，但是，當一個元素被旋轉時，它會使可拖動的特性失去控制。可拖動元素旋轉時可拖動的容器錯誤

繼承人（更新）小提琴：Click me

我認爲發生的是，當元件旋轉時，它的高度和寬度明顯保持不變，只是一個角度，但是，jQuery的不佔旋轉，使其認爲元素處於正常的水平方向，這導致上面的小提琴中顯示「bugg」。

在雁追逐的答案，我讀的地方，這會做的伎倆：

refreshPositions: true,

但沒有奏效。也沒有銷燬元素上的draggable函數，然後重新啓動它。有沒有辦法解決這個問題，所以遏制將正常運行，從而使jQuery識別輪換？

謝謝。

來源

2017-02-14 Wesley Peeters

我懷疑你需要用變換的元素在一個div。使該div可拖動，並將句柄設置爲已轉換的元素。看到這裏：http://jsfiddle.net/Twisty/fup2ga8p/你可以看到原來的盒子仍然是瀏覽器使用它的邊界點。 – Twisty

請使用'pixelsToPercentages'功能更新您的小提琴，以使其發揮作用 –

@DmytroGrynets更新了小提琴:) –

一種選擇是自己處理遏制措施。這是一種可能的方式來做到這一點。

我正在使用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

來源

2017-02-17 19:25:02 Trevor

可拖動元素旋轉時可拖動的容器錯誤

回答

相關問題