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/

，你可以这样做

jquery ui：css缩放元素不能与draggable（）一起使用

1 个答案: