javascript - 如何在没有捕捉的情况下自由移动后正确捕捉 jQuery UI 可拖动回到网格

Question

使用 jQuery UI，我有一些可拖动的 DIV。 DIV 使用相应的选项网格捕捉到 32x32 网格:[32, 32]。

用户可以在网格中的 DIV 周围移动，但他也可以按住 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 键在这个 fiddle 中不能很流畅地工作，你必须在按住 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，然后 Math.floor 它到最接近的整数，最后乘以 32 你就会马上回到方框里。