Question

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

您可以通过下面的链接尝试我的可调整大小的网格面板不能正常工作。在网格中移动框是完美的，但是在调整大小时看起来像resizable有延迟或什么的。当您快速移动光标时，它不会再捕捉。如果您逐框移动面板框（并在移动一个框后释放鼠标），它可以正常工作。

到目前为止我尝试了什么：升级到最新版本的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，我可以确定宽度或高度是否与您的网格相匹配。如果余数小于一半，我们将大小减小到下一个网格;否则，我们将大小增加到下一个网格。

jQuery在网格中可拖动

1 个答案: