Question

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

您可以在此处进行测试：https://jsfiddle.net/4bwbwbow/

我找到了这个＆＃34; draggable＆＃34;功能：

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

     }                 
 });

你认为我能以某种方式将它应用于＆＃34; sortable＆＃34;方法，而不是＆＃34; draggable＆＃34;？

Answer 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/

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

jquery ui的可排序功能不适用于人体缩放

1 个答案: