當應用CSS3縮放比例時，可排序行爲錯誤

Question

我使用CSS轉換縮放JQuery可排序元素。這兩個可排序的項目開始位置和偏移，而拖動是錯誤的，因爲JQuery不考慮CSS尺度。我解決了這部分的代碼在這裏找到：

jQuery Drag/Resize with CSS Transform Scale

但我解決不了的事情是拖拽開始的排序項位置。它跳起來，一點點。我想不出有什麼投入啓動事件處理程序：

 start: function(e, ui) 
     { 
      // something is needed here to fix the initial offset 
     } 

這小提琴說明問題了： 差異與拖動http://jsfiddle.net/adrianrosca/zbvLp/4/

Answer 1

之一是，變換不上元素本身，但在父母身上。所以它改變了一點邏輯。

下面是針對這種特定情況的解決方案，但您會看到，根據情況它可能會發生變化。例如，如果您更改變換原點，或者如果您有水平排序，則必須對其進行修改。但邏輯保持不變：

var zoomScale = 0.5; 

$(".container") 
    .sortable({ 

    sort: function(e, ui) { 
    console.log(ui.position.left) 
     var changeLeft = ui.position.left - ui.originalPosition.left; 
     // For left position, the problem here is not only the scaling, 
     // but the transform origin. Since the position is dynamic 
     // the left coordinate you get from ui.position is not the one 
     // used by transform origin. You need to adjust so that 
     // it stays "0", this way the transform will replace it properly 
     var newLeft = ui.originalPosition.left + changeLeft/zoomScale - ui.item.parent().offset().left; 

     // For top, it's simpler. Since origin is top, 
     // no need to adjust the offset. Simply undo the correction 
     // on the position that transform is doing so that 
     // it stays with the mouse position 
     var newTop = ui.position.top/zoomScale; 

     ui.helper.css({ 
     left: newLeft, 
     top: newTop 
     }); 
    } 
    }); 

http://jsfiddle.net/aL4ntzsh/5/

編輯：

以前的答案將用於定位工作，但體面半瓶醋如指出，有與驗證時的交叉功能的缺陷應該進行排序。基本上，位置正確計算，但項目保持寬度和高度值，這是不會轉換，這是造成問題。 您可以通過在開始事件中修改這些值來考慮比例因子來調整這些值。像這樣的例子：

start: function(e, ui) { 
     var items = $(this).data()['ui-sortable'].items; 
     items.forEach(function(item) { 
     item.height *= zoomScale; 
     item.width *= zoomScale; 
     }); 
    } 

http://jsfiddle.net/rgxnup4v/2/

Answer 2

有你的問題，兩件事情：一個元素的

1. 位置屬性是基於最近的父計算具有位置是絕對的還是相對的。現在基於父母身體不好，所以你必須爲容器添加position:relative;。
2. 因爲，正如您已經注意到的那樣，當計算ui.position和ui.originalPosition時，JQuery不會考慮CSS比例尺，因此您必須將「zoomScale」應用於它們兩者。

CSS

.container 
{ 
    position: relative; 
    transform: scale(0.5); 
    transform-origin: center top; 
} 

腳本

var changeLeft = ui.position.left - ui.originalPosition.left; 
var newLeft = (ui.originalPosition.left + changeLeft)/zoomScale; 
var changeTop = ui.position.top - ui.originalPosition.top; 
var newTop = (ui.originalPosition.top + changeTop)/zoomScale; 

這是更新代碼：http://jsfiddle.net/zbvLp/9/