jquery ui的可排序功能不适用于body zoom答案

【问题标题】：The sortable function of jquery ui doesn't work with body zoomjquery ui的可排序功能不适用于body zoom
【发布时间】：2016-08-29 20:44:24
【问题描述】：

它不能正常工作，因为光标没有跟随网格的元素，但就像没有缩放一样。

你可以在这里测试它：https://jsfiddle.net/4bwbwbow/

我为“可拖动”功能找到了这个解决方法：

 var zoom = $('#canvas').css('zoom');
 var canvasHeight = $('#canvas').height();
 var canvasWidth = $('#canvas').width();

 $('#dragme').draggable({
     drag: function(evt,ui)
     {
         // zoom fix
         ui.position.top = Math.round(ui.position.top / zoom);
         ui.position.left = Math.round(ui.position.left / zoom);

         // don't let draggable to get outside of the canvas
         if (ui.position.left < 0) 
             ui.position.left = 0;
         if (ui.position.left + $(this).width() > canvasWidth)
             ui.position.left = canvasWidth - $(this).width();  
         if (ui.position.top < 0)
             ui.position.top = 0;
         if (ui.position.top + $(this).height() > canvasHeight)
             ui.position.top = canvasHeight - $(this).height();  

     }                 
 });

你认为我可以以某种方式将它应用于“可排序”方法，而不是“可拖动”吗？

【问题讨论】：

标签： javascript jquery css jquery-ui

【解决方案1】：

我通过创建反映主要缩放、更改缩放值、宽度、高度和字体大小容器和元素的公式创建了一个相当实用的解决方法：

 body { zoom:0.5; } 

 #sortable { zoom: 2; list-style-type: none; margin: 0; padding: 0; width: 225px; }  

 #sortable li { margin: 1.5px 1.5px 1.5px 0; padding: 1px; float: left; width: 50px; height: 45px; font-size: 2em; text-align: center; }

https://jsfiddle.net/vcg2aL8s/

这是我想到的唯一解决方案。

【讨论】：