javascript - jQuery UI可排序和容器缩放

我想在缩放为0.4的容器内对div进行排序；

问题是，当我拖动元素以对其进行排序时，被拖动的div的位置与鼠标光标无关。如何使div相对于光标移动，就像容器没有zoom：0.4一样？

这是一个演示。只需拖动一个元素，您就会发现div不会根据光标进行动画处理。 http://codepen.io/anon/pen/CFfxb

#container {
  width: 1000px;
  height: auto;
  background-color:red;
  margin: 0 auto;
  zoom: 0.4;
}

最佳答案

只需自行更新职位即可。

如果您有CSS：

#container{
    zoom: 0.5;
}

您将使用：

$('#container').sortable(
    drag: function(e,ui){
        zoomAmount = 2;
        ui.position.top = (e.clientY + $("body").scrollTop()) * zoomAmount;
        ui.position.left = e.clientX * zoomAmount;
    }
);

您必须更新zoomAmount变量以匹配您正在使用的缩放系数。

因此对于：

zoom:0.4

您将其更改为：

zoomAmount = 2.2;