Question

我注意到CSS3 scale属性对jquery ui做了非常糟糕的事情，特别是对可排序的。问题是鼠标仍然需要移动，就像元素没有缩放一样。看看这个jsfiddle example。

有没有人想过如何解决这个问题？是否可以改变鼠标移动的速度？接下来我将查看html5 native drag and drop，并尝试编写自己的可排序函数。

更新：

Jquery ui draggable可以正常使用CSS3缩放元素，这里有一个fiddle。

Answer 1

事实证明，真正的答案并不需要编写特殊的移动功能。可以使用Jquery ui sortable，只要正在排序的项目已被包装在具有溢出隐藏的适当大小的div中。请查看this jsfiddle以获取示例。

问题在于我使用负边距迫使缩放的div彼此接近。然后，当我开始拖动一个项目时，它占用了错误的空间。将缩放项目包装在非缩放div中，一切都按预期工作。

Answer 2

我没有使用jquery ui的解决方案，但我确实有一个解决方案，可以使用Raphael和扩展其他svg对象。

首先，使用chrome或firefox，在this jsfiddle中拖动点。务必拖动两个点并使用底部的滑块来更改框的比例。滑块的默认比例范围为.4到1.2。在Chrome中，滑块实际上是一个滑块，但在Firefox中它显示为文本框。如果您使用的是firefox，请输入100 x比例的值，即70 =＆gt; 0.7。

您应该体验的是，无论刻度如何，黑点都会跟踪鼠标，红点仅在刻度为1.0时跟踪。

原因是两个点使用不同的'onMove'功能。当红点正常移动时，黑点按1 /刻度移动。

var moveCorrected = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({
      cx: this.ox + (1/scale)*dx, 
      cy: this.oy + (1/scale)*dy
    });
}
var move = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({
      cx: this.ox + dx, 
      cy: this.oy + dy
    });
}

所以，回答我原来的问题。您不能（也不应该）能够更改鼠标的移动方式，这显然是用户定义的行为，但您可以使用鼠标更改要移动的对象的移动功能。

如何使css3缩放元素可拖动

2 个答案: