Javascript 旋转可拖动元件时，可拖动安全壳会出错

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

这里有一把（更新的）小提琴：

我认为当一个元素旋转时，它的高度和宽度显然保持不变，只是在一个角度上，然而，jQuery没有考虑旋转，使它认为该元素处于正常的水平方向，这导致了上面小提琴中显示的“bugg”

在一次白费力气寻找答案的过程中，我在某个地方读到这样做会奏效：

refreshPositions: true,

但它不起作用。也没有销毁元素上的

draggable

函数，然后重新初始化它。有没有一种方法可以解决这个问题，从而使容器正常工作，从而使jQuery能够识别旋转

---

谢谢。

一个选择是自己处理容器。这里有一种可能的方法

我使用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;
  }
});

var-boundingContainer、boundingDraggable、prevLeft、prevTop；
$（“.draggable”）.draggable({
课程：{
“ui可拖动拖动”：“突出显示可拖动”
},
开始：功能（事件、用户界面）{
BoundingDragTable=ui.helper[0]。getBoundingClientRect（）；
boundingContainer=ui.helper.closest（'#DragableContainer'）[0]。getBoundingClientRect（）；
},
拖动：函数（事件、ui）{
如果（ui.offset.left-prevlet）{
ui.position.left=prevLeft；
} 
}
if（ui.offset.top+boundingDraggable.height>=boundingContainer.bottom）{
如果（ui.position.top>prevTop）{
ui.position.top=prevTop；
} 
}
prevLeft=ui.position.left；
prevTop=ui.position.top；
}
});

---

我怀疑您需要将转换后的元素包装在一个div中。将该div设置为可拖动的，并将句柄设置为转换后的元素。请参见此处：您可以看到原始框仍然是浏览器用于其边界点的框。请使用

pixelsToPercentages

函数更新您的fiddle，以使其work@DmytroGrynets更新了小提琴：）