jquery 用户界面 : css scaled elements do not work with draggable()

Question

在 jquery ui 中使用 draggable() 方法时，我试图使 CSS 缩放对象正常工作。

CSS:

#container{
  zoom: 2;
  -moz-transform: scale(2);
  width: 200px;
  height: 200px;
  background-color: #888;
}

#box{
  width: 100px;
  height: 100px;
  background-color: blue;
}

JS:

$('#box').draggable();

请参阅此处示例:https://jsfiddle.net/9zm486xu/1/

在上面的示例中，您会注意到比例因子会影响拖动行为，从而导致例如缩放设置为 2 时鼠标距离的两倍。

有没有办法让 CSS 缩放的对象像用户期望的那样可拖动(总是在鼠标下方)？我可以使用一种方法计算每个要缩放的对象，然后将其应用于 DOM，但仅缩放容器(参见示例)会容易得多。

Answer 1

$( ".selector" ).draggable({
  drag: function( event, ui ) {

    ui.position.left = ui.position.left / scale
    ui.position.top = ui.position.top / scale
  }
});

如果你 https://jsfiddle.net/9zm486xu/2/ 你可以做这样的事情