可拖动元素旋转时可拖动的容器错误

问题描述：

我有一个可拖动的元素，它也可调整大小和旋转。这些旋转是由CSS转换处理的，但是，当一个元素被旋转时，它会使可拖动的特性失去控制。可拖动元素旋转时可拖动的容器错误

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

我认为发生的是，当元件旋转时，它的高度和宽度明显保持不变，只是一个角度，但是，jQuery的不占旋转，使其认为元素处于正常的水平方向，这导致上面的小提琴中显示“bugg”。

在雁追逐的答案，我读的地方，这会做的伎俩：

refreshPositions: true,

但没有奏效。也没有销毁元素上的draggable函数，然后重新启动它。有没有办法解决这个问题，所以遏制将正常运行，从而使jQuery识别轮换？

谢谢。

我怀疑你需要用变换的元素在一个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

可拖动元素旋转时可拖动的容器错误

相关推荐