如何使css3缩放元素拖动

我注意到，CSS3 scale属性对jQuery UI真的不好，特别是可排序的。问题在于鼠标仍然需要移动，就像元素未缩放一样。看看这个jsfiddle example。如何使css3缩放元素拖动

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

UPDATE：

jQuery UI的确定与CSS3拖动作品放大的元素，这里是它的一个fiddle。

来源

2011-02-13 lashleigh

事实证明，真正的答案并不需要编写特殊的移动功能。只要被排序的项目已经被隐藏溢出的适当大小的div所包装，就可以使用jquery ui sortable。以this jsfiddle为例。

问题是我已经使用负余量强制缩放的div彼此靠近。然后，当我开始拖动一件物品时，它占据了错误的空间。将缩放的项目封装在非缩放的div中，一切都按预期工作。

来源

2011-02-22 01:27:38 lashleigh

我没有与jquery ui一起使用的解决方案，但我确实有与Raphael一起工作的解决方案以及其他svg对象的扩展。

首先，使用chrome或firefox，在this jsfiddle中拖动点。确保拖动两个点并使用底部的滑块更改框的比例。滑块的默认比例范围为.4到1.2。在Chrome中，滑块实际上是一个滑块，但在Firefox中显示为文本框。如果您使用的是Firefox，请输入100 x的值，即70 => 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 
    }); 
}

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

来源

2011-02-22 00:14:54 lashleigh

如何使css3缩放元素拖动

回答

相关问题