jQuery可在网格中拖动

Posted 2023-05-08

【中文标题】jQuery可在网格中拖动

【英文标题】：jQuery draggable in grid

【发布时间】：2017-02-22 21:49:09

【问题描述】：

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

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

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

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

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

jQuery demo YouTube demo

【问题讨论】：

这可能对你有帮助：***.com/questions/15121727/…

【参考方案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，我可以确定宽度或高度是否与您的网格匹配。如果余数小于一半，我们将大小减小到下一个网格；否则，我们将大小增加到下一个网格。

【讨论】：

哇，谢谢，你帮了我很多。玩了几个小时后，我只有一件事无法解决：(youtube.com/watch?v=WTJ7GyD7hJw) 当我拉动底部以调整宽度变化的大小时。另一件事（不在视频中）是当我想全宽时我不能。我制作了一个 800*800 的容器，并希望使面板的宽度为 800 像素，但它在最后一个网格块（40 像素）时停止了。这是 jQuery 包含所做的事情还是与您的代码有关？