旋转可拖动元件时，可拖动的围栏会越来越多

Question

我有一个可拖动元素，它也可以解析且可旋转。这些旋转由CSS转换处理，但是，当元素旋转时，它会使可拖动的特征失控。

Heres A（更新）小提琴：单击我

我认为发生的事情是，当元素旋转时，高度和宽度显然保持不变，只是一定角度，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;
  }
});

小提琴