如何在没有抓取的情况下自由移动后正确地将jQuery UI拖拽回网格

Question

使用jQuery UI，我有一些可拖动的DIVs。DIVs使用相应的选项网格( 32，32 )快速切换到32x32网格。

用户可以在网格中移动DIVs，但他也可以按住Alt键自由地移动它们，而不需要切换到网格。当按住Alt键时，我只需将该DIV的网格选项更改为1，1。

问题是，下次DIV将被移动，它将对齐一个32,32网格，但将有一个偏移。

所以我要做的是：

• DIV被拖在32,32网格上。
• 用户按Alt，现在实例可以在1,1网格中自由移动。
• 用户将DIV放置在一个不均匀的坐标中，如(103，67)
• 下次DIV被拖动时，首先在32,32上正确地抓取它。 网格，然后开始拖动(当然，除非用户按下 (备选案文)

http://jsfiddle.net/SwHpa/2/ (ALT键在这个小提琴中不能很流畅地工作，您必须在保持ALT的同时单击空空间，然后拖动DIV以测试自由拖动)

$(document).ready(function(){

    $(".draggable").draggable({
        grid: [32, 32]
    });
});

$(window).on('keydown', function(event){

    if (event.keyCode == 18) {
         $(".draggable").draggable({
            grid: [2, 2]
        });
    }

});

$(window).on('keyup', function(event){

    if (event.keyCode == 18) {
         $(".draggable").draggable({
            grid: [32, 32]
        });
    }

});

Answer 1

我刚开始使用堆栈溢出，第一次发表评论，但也许类似这样的东西会有帮助：http://jsfiddle.net/SwHpa/4/

var myTop = jQuery(".draggable").css("top");
var myLeft = jQuery(".draggable").css("left");
var myNewTop = 0;
var myNewLeft = 0;
myNewTop = Math.floor(myTop / 32) * 32;
myNewLeft = Math.floor(myLeft / 32) * 32;
jQuery(".draggable").css({"top" : myNewTop, "left" : myNewLeft});

在放弃alt键后，需要重新计算到最近的"32“增量。我想，如果你把你当前的顶部/左边除以32，然后把它除以最接近的整数，最后乘以32，你就会回到方框中。