Angular + ui-sortable列表:CTRL-鼠标滚轮缩放与正常鼠标滚轮缩放

时间:2013-10-22 21:24:11

标签: javascript angularjs dom jquery-ui-sortable

我的理解是CTRL-mousewheel缩放是一种可访问性功能,内置于相关浏览器中(我目前正在使用Chrome和Opera进行测试,两者都使用CTRL-缩放)。

然而,这并非真正需要可访问性,因为该应用程序不适用于普通大众。与标准鼠标滚轮缩放元素相比,CTRL-wheel zoom具有开箱即用的优点:看起来Angular ui-sortable在任何缩放/比例下都能正常工作。

不幸的是,从我在SO上找到的其他答案来看,使用CTRL-wheel时无法有选择地缩放 :浏览器只能缩放所有内容 。对我来说,这包括position:fixed覆盖与主视口同时缩放,这是不好的。

所以我根据鼠标光标所在的元素设置了一些滚动代码,例如。仅当鼠标悬停在该视口元素上时,才使用鼠标滚轮缩放主视口。

问题在于ui-sortable 我已使用scale transform-origin设置为50% 50%,但是,当我以1:1以外的任何比例拖动ui-sortable时,它们似乎都是剩下。关于如何开始解决这个问题的任何想法?

1 个答案:

答案 0 :(得分:0)

这不是Angular's sortable adaptation中的问题,而是基于第4000行(_generatePosition或其中一个)的基础jQuery-ui 1.9.2定位函数中的问题。我相信,由于浏览器不会在scalezoom期间修改实际维度值,并且该库中提供的公式不会考虑缩放(我可以看到),因此无法轻松修复,因为jQuery ui.sortable需要精确度值来计算正确的位移。 (我尝试修改公式来解释这一点,但没有成功。)

目前最简单的解决方法是手动更改单个列表元素的width() / height(),如here所示。这可能需要选择使用width() / height()来缩放 ,以及使用scale更改的内容(通常更容易)。