如何将 jquery ui 可拖动的可排序内容与自定义比例代码相结合？

Question

我正在尝试将我的可拖动排序的东西与一些适合我的比例代码结合起来。我只是还没找到好的解决方案。

看一下： http://jsfiddle.net/UXLAE/7/

我已将比例代码注释掉，以便您了解应用的实际工作方式。

您拥有顶部面板，并且可以将项目从那里拖到底部面板（项目被克隆）。 在底部面板中，您必须能够对项目进行排序。

现在我还希望能够在鼠标悬停时缩放顶部和底部面板中的每个项目。比例尺必须是叠加的，并且必须与源项目具有相同的中心。我没有用 .animate() 或 .effect("scale") 来做这件事，这会使事情变得容易得多，但我设法编写了一些效果很好的自定义代码（我注释掉的部分）。我的问题是现在我不知道如何将自定义代码与我已有的代码结合起来。他们有点互相破坏；）但要自己找。

如果您能发表一些想法甚至是解决方案，那就太好了。

问候

Answer 1

您的原始元素运行良好，但我看到您注释掉的代码破坏了功能。

看看你的可放置代码：

accept: "#topSquareList li",

您的缩放功能创建了一个不属于#topSquareList 的克隆。我怀疑这就是原因。

当您使用 clone() 时，此克隆不是 #topSquareList 的子代（只有原始版本是），这就是您的选择器在可放置代码中与它不匹配的原因。您需要整理好要删除的内容并制作适当的选择器。

更新：

经过一番折腾，我想出了这个：http://jsfiddle.net/UXLAE/27/

您的比例代码现在与拖放/排序结合使用。您应该将我所做的与您的原始代码进行比较，以找出它为什么不起作用 - 原因有很多。有帮助吗？

Answer 2

如果您可以使用 CSS 转换，那么只需添加以下规则即可在不使用任何 JavaScript 的情况下完成缩放，因此对 jQueryUI 拖放或排序的影响为零。

.square:hover {
    -webkit-transform:scale(1.2);
    -ms-transform:scale(1.2);
    -o-transform:scale(1.2);
    -moz-transform:scale(1.2);
    transform:scale(1.2);
}

对transform 的本机浏览器支持不是complete，但完全支持主要的现代浏览器。如果您需要支持这些浏览器，IE workaround。