Question

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

用户可以在网格中移动DIV，但他也可以按住Alt键自由移动它们而不会捕捉到网格。按住Alt键时，我只需将该网格选项更改为[1,1]即该DIV。

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

所以我需要做的是：

在32,32网格上拖动DIV
用户按下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键后，您需要重新计算到最近的＆＃34; 32＆＃34;增量。我想如果你把你当前的上/左边除以32，然后Math.floor它到最接近的整数，最后将它乘以32，你就会回到方框中。

如何在没有捕捉的情况下自由移动后，将jQuery UI可拖动回正确

1 个答案: