Question

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

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

这是我的网格：

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

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

它没有一点点然后积累，对于网格中的一个区域来说，这是完全错误的。

你认为这是正确的：

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

向下移动1个单位：

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

完全错了。

Answer 1

我认为您误解了jQuery UI Draggable中SELECT NAME FROM TABLE1 WHERE NAME = @NAME_PARAM选项的使用。它根据像素数将拖动元素捕捉到X轴和Y轴。 DOM中没有网格或元素集，仅基于可拖动元素与其父元素或文档之间的关系进行计算。

您的帖子不包括任何适当的示例，仅包括屏幕截图。因此，没有很好的方法来了解HTML的外观。这是我创建的一个基本示例，希望它与您的代码相似。

grid

$(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;
}

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

我们使用容器初始化可拖动对象，以使其保留在网格范围内，并使用grid选项将其设置为正方形的宽度/高度。可拖动项的移动会捕捉到网格线。

如果您希望较少的急动但仍保持附着在网格线上，则也可以使用<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>。在您的用例中，这是不可取的，因为如果不与边框相交，它可能会使该项目保持浮动状态。

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

尚不清楚您是否希望网格中的每个单元都可寻址。您可以制作大量的div元素，并使它们全部可拖放。这样，用户无需拖动即可拖动元素，但是当他们放下该项目时，它可以将自身附加到div上。

希望有帮助。

jquery UI可拖动网格使其可见

1 个答案: