javascript - jquery ui的sortable功能不适用于body缩放

Question

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

您可以在这里测试:https://jsfiddle.net/4bwbwbow/

我找到了“可拖动”功能的解决方法:

JS

 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();  

     }                 
 });

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

Answer 1

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

 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/

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