旋转可拖动元素时可拖动​​的包含错误

Question

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

这是一个（更新的）小提琴：Click me

我认为发生的是当一个元素被旋转时，它的高度和宽度显然保持不变，只是在某个角度，然而，jQuery没有考虑到旋转，使得它认为元素在它的正常情况下水平方式，导致上面小提琴中显示的“bugg”。

在寻找答案的狂野追逐中，我在某处读到了这样做的原因：

refreshPositions: true,

但它没有用。也没有破坏元素上的draggable函数，然后重新启动它。有没有办法解决这个问题，因此包含将正常运行，从而使jQuery识别旋转？

感谢。

Answer 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