应用 CSS3 缩放时可排序行为错误

我正在使用 CSS 转换缩放 JQuery 可排序元素。拖动时可排序项目的起始位置和偏移量都是错误的，因为 JQuery 不考虑 CSS 比例。我用这里找到的代码部分解决了这个问题：

jQuery 拖动/使用 CSS 变换比例调整大小 https://stackoverflow.com/questions/10212683/jquery-drag-resize-with-css-transform-scale%5B1%5D

但我无法解决的是拖动开始时的可排序项目位置。它向上向右跳一点。我不知道要放入启动事件处理程序中的内容：

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

这个小提琴显示了问题：http://jsfiddle.net/adrianrosca/zbvLp/4/ http://jsfiddle.net/adrianrosca/zbvLp/4/

与一处区别可拖动的那是转换不是在元素本身上，而是在父元素上。所以它改变了一点逻辑。

这是针对这种特定情况的解决方案，但您会发现它可能会根据情况而变化。例如，如果你改变变换原点，或者如果您有水平排序，则必须对其进行调整。但逻辑保持不变：

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/ http://jsfiddle.net/aL4ntzsh/5/

EDIT:

之前的答案适用于定位，但正如 Decent Dabbler 所指出的，验证何时应该进行排序的交集函数存在一个缺陷。基本上，位置计算正确，但项目保留width and height未转换的值，这导致了问题。 您可以通过在开始事件时修改这些值来调整这些值，以考虑比例因子。例如这样：

 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/ http://jsfiddle.net/rgxnup4v/2/