jQuery UI可排序和容器縮放

Question

我想對縮放為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;
}

Answer 1

只需自行更新職位即可。

如果您有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;