应用CSS3比例时，Sortable行为错误

我正在使用CSS转换扩展JQuery可排序元素。 两个可排序的项目开始位置和偏移，而拖动是错误的，因为JQuery不考虑CSS标度。 我用这里的代码部分解决了它：

jQuery使用CSS转换比例拖动/resize

但我无法解决的问题是拖动开始时的可排序项目位置。 它向上跳了一下。 我无法弄清楚要放入启动事件处理程序的内容：

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

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

Answer 1

与draggable的一个区别是变换不是在元素本身上，而是在父元素上。 所以它改变了一点逻辑。

这是针对这种特定情况的解决方案，但您会看到根据情况可能会发生变化。 例如，如果更改transform-origin ，或者如果您具有水平排序，则必须对其进行调整。 但逻辑保持不变：

 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/

编辑：

之前的答案将适用于定位，但正如Decent Dabbler所指出的，交叉函数存在一个缺陷，可以在进行排序时进行validation。 基本上，正确计算位置，但项目保持未转换的宽度和高度值，这导致问题。 您可以通过在启动事件上修改这些值来调整这些值，以考虑比例因子。 像这样举例如：

  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比例，因此您必须将“缩放比例”应用于它们。

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/