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

Iは、ズーム値、幅、高さ、フォントサイズのコンテナと要素を変更し、一次ズームを反映する式を作成することによって、かなりの機能的な回避策を作成した：

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/

この私の心に来た唯一の解決策です。