jQuery可在网格中拖动

Question

也许这是一个错误报告，也许是我的错。经过一整天的尝试，我不再知道答案了。

您可以通过下面的链接进行尝试，我的可调整大小的网格面板无法正常工作。移动网格中的框效果很好，但是在调整大小时，看起来调整大小有延迟或其他东西。当您快速移动光标时，它就不再捕捉了。如果您逐个框移动面板（并在移动一个框后释放鼠标），它可以正常工作。

到目前为止我做了什么：升级到最新版本的 jQuery 和 jQuery-UI，尝试不同的网格大小（网格本身是 40x40，可拖动网格是 40x40，但是为了让可调整大小的工作我不得不更改网格尺寸为 70x70。这是为什么呢？）

$(function(){
  $(".panel")
    .draggable({ grid: [40,40], containment: $('.container') })
    .resizable({ grid: [70,70], containment: $('.container') })
});

这是一个已知问题还是我做错了什么？

jQuery demo YouTube demo

Answer 1

一种方法是在调整大小期间手动调整size{ width, height}。

工作示例：https://jsfiddle.net/Twisty/1j71x38j/

jQuery

$(function() {
  $(".panel ")
    .draggable({
      grid: [40, 40],
      containment: $('.container')
    })
    .resizable({
      //grid: [70, 70],
      containment: $('.container'),
      resize: function(event, ui) {
        if (ui.size.width % 40 != 0) {
          var off = ui.size.width % 40;
          if (off <= 20) {
            ui.size.width = ui.size.width - off;
          } else {
            ui.size.width = ui.size.width + off;
          }
        }
        if (ui.size.height % 40 != 0) {
          var off = ui.size.height % 40;
          if (off <= 20) {
            ui.size.height = ui.size.height - off;
          } else {
            ui.size.height = ui.size.height + off;
          }
        }
      }
    });
});

使用 Mod 40，我可以确定宽度或高度是否与您的网格匹配。如果余数小于一半，我们将大小减小到下一个网格；否则，我们将大小增加到下一个网格。