获取 JQuery UI Draggable 以捕捉到特定的网格（有一个扭曲）

Question

我目前正在尝试使用 jQuery 和 jQuery UI 将“拖放”功能应用于一堆元素。应该注意的是，元素在被拖动时应始终捕捉到特定的网格。我很高兴看到在这个问题@Nate中已经很好地解释了功能。我面临的问题是，可拖动元素应捕捉到的网格应面向可放置元素，并且可拖动元素不是可放置元素的子元素。

详细来说，不同大小的可拖动元素应始终捕捉到由面向可放置元素的 40x40 单元格组成的网格（在我的示例中为 400x400，因此是 10x10 网格），这是我的 html 的另一部分。我面临的主要问题是，我似乎无法让捕捉网格的方向与我的可放置对齐。这是我目前在 javascript 中的方法：

$(document).ready(function(){

    $(".draggable").draggable({
        revert: true,
        revertDuration: 0,
        snap: true,
        snapTolerance: 40,
        containment: ".container",

        drag: function( event, ui ) {
            var snapTolerance = $(this).draggable('option', 'snapTolerance');

            //get positions of the own board and the currently dragged element relative to the document
            var ownBoardPositionRelToDoc = $("#droppable").offset();
            var uiPositionRelToDoc = ui.helper.offset();

            var topDiffToDoc = ui.helper.offset().top - ui.position.top;
            var leftDiffToDoc = ui.helper.offset().left - ui.position.left;

            console.log(ownBoardPosition);
            console.log(uiPosition);

            topRemainder = ownBoardPosition.top % 40;
            leftRemainder = ownBoardPosition.left % 40;

            if (topRemainder <= snapTolerance) {
                ui.position.top = ui.helper.offset().top - topRemainder;
            }

            if (leftRemainder <= snapTolerance) {
                ui.position.left = ui.helper.offset().left - leftRemainder;
            }
        }
    });

    $(".droppable").droppable({
        accept: ".draggable",
        tolerance: "fit",
        drop: function(event, ui) {
            $(ui.draggable).appendTo($(this));
        }
    });

});

我构建了 a JSFiddle 来进一步解释我的想法。遗憾的是，由于不支持 JQuery UI，它无法执行，但您应该明白这一点。

Answer 1

考虑以下事项。

JavaScript

$(function() {
  $(".draggable").draggable({
    revert: true,
    revertDuration: 0,
    containment: ".container",
    grid: [40, 40]
  });

  $(".droppable").droppable({
    accept: ".draggable",
    tolerance: "fit",
    drop: function(event, ui) {
      $(ui.draggable).appendTo($(this));
    }
  });
});

https://jsfiddle.net/Twisty/rLx7jtob/

您可以使用

grid

来简化操作。

https://api.jqueryui.com/draggable/#option-grid

将拖动助手捕捉到网格，每个 x 和 y 像素。该数组的形式必须为

[ x, y ]

.