如何使css3缩放元素可拖动答案

【问题标题】：How to make css3 scaled elements draggable如何使css3缩放元素可拖动
【发布时间】：2011-06-26 14:26:03
【问题描述】：

我注意到 CSS3 的 scale 属性对 jquery ui 确实很糟糕，特别是对 sortable。问题是鼠标仍然需要移动，就好像元素没有缩放一样。看看这个 jsfiddle example。

有人对如何解决这个问题有想法吗？是否可以更改鼠标移动的速度？接下来我将研究html5原生drag and drop，并尝试编写自己的可排序函数。

更新：

Jquery ui draggable 适用于 CSS3 缩放元素，这里有一个 fiddle 。

【问题讨论】：

标签： jquery-ui html css jquery-ui-sortable

【解决方案1】：

我没有使用 jquery ui 的解决方案，但我有使用 Raphael 以及扩展其他 svg 对象的解决方案。

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

您应该刚刚体验到的是，无论比例如何，黑点都会随鼠标移动，而红点仅在比例为 1.0 时才会移动。

原因是两个点使用不同的“onMove”功能。黑点按 1/scale 移动，而红点正常移动。

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
    });
}

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

【讨论】：

【解决方案2】：

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

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

【讨论】：