如何自由移动后，可以正确地拖动jquery UI拖动回电网

Question

使用jquery ui，我有一些可拖动的div。使用相应的选项网格将DIVS快照到32x32网格：[32，32]。

用户可以在网格中移动DIV，但他也可以按住Alt键以自由移动它们而无需捕获网格。当按下alt键时，我只需将网格选项更改为[1，1]的该部门

问题是，下一次DIV要移动时，它将与[32,32]网格对齐，但会有一个偏移。

所以我需要做的是：

• DIV在32,32网格上拖动
• 用户按Alt，现在实例在1,1网格中自由移动
• 用户将DIV放置在不均匀的坐标中，例如（103，67）
• 下次DIV被拖动时，首先在32,32上正确捕捉
  网格然后开始拖动（除非用户按下
  除非alt）

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，您将立即回到方盒中。