应用CSS3缩放时，Sortable行为错误 [英] Sortable behaves wrong when CSS3 scale is applied

问题描述

我使用CSS变换缩放JQuery可排序元素。这两个可排序项目开始位置和偏移，而拖动是错误的beacuse JQuery不考虑CSS标度。我用这里的代码部分解决了这个问题：

I'm scaling a JQuery sortable element with CSS transform. Both the sortable items start positions and offsets while dragging are wrong beacuse JQuery doesn't take CSS scales into consideration. I solved it partially with code found here:

jQuery使用CSS变换缩放拖动/调整大小

但是我无法解决的问题是拖拽时可排序的项目位置。它向上和向右跳一点。我不知道什么要放入开始事件处理程序：

But the thing I cannot solve is the sortable item position at drag starts. It jumps up and right a bit. I can't figure out what to put into the start event handler:

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

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

推荐答案

与可拖动的一个区别在于变换元素本身，但在父级。所以它改变了一点逻辑。

One difference with draggable is that the transform is not on the elements themselves, but on the parent. So it changes a bit the logic.

这里有一个解决方案，但是你会看到，根据情况可能会改变。例如，如果您更改 transform-origin ，或者您有水平排序，则必须进行调整。但逻辑保持不变：

Here's a solution for this specific case, but you'll see that depending on the situation it may change. For example, if you change transform-origin, or if you have an horizontal sortable, it'll have to be adapted. But the logic stays the same:

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/

编辑：

上一个答案将用于定位，但是正如Dobbler所指出的，存在一个缺点，交叉函数会在发生排序时进行验证。基本上，正确计算的位置，但项目保持宽度和高度值未转换，这是导致的问题。
您可以通过在开始事件中修改这些值来调整这些值，以考虑比例因子。像这样：

Previous answer will work for positioning, but as pointed by Decent Dabbler, there is a flaw with the intersection function that validates when a sorting should occur. Basically, positions are correctly calculated, but the items keep width and height values that are not transformed, which is causing the problem. You can adjust these values by modifying them on start event to take scale factor into account. Like this for example:

 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/

这篇关于应用CSS3缩放时，Sortable行为错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！