我注意到,CSS3 scale属性对jQuery UI真的不好,特别是可排序的。问题在于鼠标仍然需要移动,就像元素未缩放一样。看看这个jsfiddle example。如何使css3缩放元素拖动
有没有人想过如何解决这个问题?是否有可能改变鼠标移动的速度?接下来我将看看html5原生drag and drop,并尝试编写我自己的可排序函数。
UPDATE:
jQuery UI的确定与CSS3拖动作品放大的元素,这里是它的一个fiddle。
我注意到,CSS3 scale属性对jQuery UI真的不好,特别是可排序的。问题在于鼠标仍然需要移动,就像元素未缩放一样。看看这个jsfiddle example。如何使css3缩放元素拖动
有没有人想过如何解决这个问题?是否有可能改变鼠标移动的速度?接下来我将看看html5原生drag and drop,并尝试编写我自己的可排序函数。
UPDATE:
jQuery UI的确定与CSS3拖动作品放大的元素,这里是它的一个fiddle。
事实证明,真正的答案并不需要编写特殊的移动功能。只要被排序的项目已经被隐藏溢出的适当大小的div所包装,就可以使用jquery ui sortable。以this jsfiddle为例。
问题是我已经使用负余量强制缩放的div彼此靠近。然后,当我开始拖动一件物品时,它占据了错误的空间。将缩放的项目封装在非缩放的div中,一切都按预期工作。
我没有与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
});
}
所以,在回答我原来的问题。你不能(也不应该)能够改变鼠标移动的方式,这显然是用户定义的行为,但你可以改变被移动的对象的移动功能以用鼠标跟踪。