jQuery UI的排序功能不適用於身體縮放

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

我通過創建反映主變焦式創建了一個相當功能的解決方法，改變變焦值，寬度，高度，和字體大小的容器和元素：

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/

這是我想到的唯一解決方案。