如何使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縮放元素拖動

回答

相關問題