-1

jquery ui draggable 允许您创建一个网格，您可以在该网格上捕捉可拖动元素。

如何显示网格？我发现网格与我期望的不同，并且某种使其可见的方法会有所帮助。

这是我的网格：

http://cl.ly/image/2W372D1e0U27

除非它将未来向下移动，否则这是完全错误的。

它并没有一点点偏离然后堆积起来，对于网格中的 1 个区域来说这是完全错误的。

您在这里看到它是正确的：

http://cl.ly/image/2N3S1Y432b3Z

下移 1 个单位：

http://cl.ly/image/3V3E290I0f1H

完全错误。

4

1 回答 1

4

我认为您误解了gridjQuery UI Draggable 中选项的使用。它根据像素数将拖动元素捕捉到 X 和 Y 轴。DOM 中没有网格或元素集，只是基于可拖动元素相对于其父元素或文档的位置的计算。

您的帖子不包含任何适当的示例，仅包含屏幕截图。所以没有什么好方法可以知道 HTML 的样子。这是我创建的一个基本示例，希望它与您的代码相似。

$(function() {
  var gs = parseInt($("#gs").val()),
    sq = parseInt($("#sq").val()),
    cRows = $(".drag-zone").height() / gs,
    cCols = $(".drag-zone").width() / gs;

  function drawGridLines(r, c, b) {
    /*
    input: Rows Integer, Cols integer, Buffer Integer
    output: null
    Based on the number or Rows and Cols, draw gridlines with a single buffer space between.
    */
    for (var i = 0; i < r; i++) {
      $("<div>", {
        class: "row"
      }).css({
        height: (b - 1) + "px",
        width: "100%",
        top: (b * i) + "px"
      }).insertBefore($(".drag-zone"));
    }
    for (var i = 0; i < c; i++) {
      $("<div>", {
        class: "col"
      }).css({
        width: (b - 1) + "px",
        height: "100%",
        left: (b * i) + "px"
      }).insertBefore($(".drag-zone"));
    }
  }

  function makeSquare(s, tObj) {
    /*
    input: Size Integer, Target jQuery Object
    output: null
    Create a square div element with class 'item' and append it to the Target.
    */
    $("<div>", {
      class: "item"
    }).css({
      width: s + "px",
      height: s + "px"
    }).appendTo(tObj);
  }

  function makeDrag(obj, b) {
    /*
    input: jQuery Object, Buffer Integer
    output: null
    Initialize the jQuery Object with Draggable, using specific options for square Grid spacing
    */
    obj.draggable({
      containment: "parent",
      grid: [b, b]
    })
  }

  drawGridLines(cRows, cCols, gs);
  makeSquare(sq, $(".drag-zone"));
  makeDrag($(".item"), gs);

  $("#go-btn").click(function() {
    var ngs = parseInt($("#gs").val()),
      nsq = parseInt($("#sq").val()),
      rw = $(".drag-zone").height() / ngs,
      cl = $(".drag-zone").width() / ngs;
    $(".row, .col, .item").remove();
    if (nsq < 2) {
      nsq = 2;
    }
    drawGridLines(rw, cl, ngs);
    makeSquare(nsq, $(".drag-zone"));
    makeDrag($(".item"), ngs);
  });
});
* {
  margin: 0;
  padding: 0;
}

body {
  background: #ccc;
}

p input {
 width: 40px;
}

.grid {
  background: black;
  position: relative;
  width: 400px;
  height: 300px;
}

.drag-zone {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
}

.item {
  background: red;
}

.row {
  display: block;
  position: absolute;
  border-bottom: 1px solid #FFF;
  left: 0;
}

.col {
  display: block;
  position: absolute;
  border-right: 1px solid white;
  top: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Gutter Size: <input id="gs" type="text" value="20" /> Square Size: <input id="sq" type="text" value="60" /> <button id="go-btn">Redraw</button>
  <div class="grid">
    <div class="drag-zone">
    </div>
  </div>

如您所见，行和列具有以 50 像素为增量的网格线，以在背景中形成网格。我在顶部放置了另一个 div，但这并不完全必要。

我们使用包含初始化可拖动，以保持在网格范围内，并使用网格选项设置为正方形的宽度/高度。可拖动项目的移动与网格线对齐。

snap如果您希望减少不平稳的运动但仍与网格线保持连接，您也可以使用。在您的用例中，这是不可取的，因为如果它不与边框相交，它会使项目保持浮动。

您还可以编写一个stop函数来检查位置并将其移动到最近的网格线。这提供了更自由的移动效果，然后在释放时捕捉。您甚至可以动画它滑入位置。

目前尚不清楚您是否希望网格中的每个单元格都是可寻址的。您可以制作大量 div 元素并使它们都可放置。通过这种方式，用户在没有捕捉的情况下拖动元素，但是当他们放下项目时，它可以将自己附加到 div 中。

希望有帮助。

于 2019-01-17T08:37:19.390 回答