Javascript Jquery UI可调整大小-调整特定宽度

我正在使用jqueryui创建一种计划

我希望用户调整计划上的事件大小，并且每个事件必须填充一天（一个单元格）

这是小提琴：

我的代码：

    // width = 100, it's the size of a cell
    $('.label').draggable({
        snap: '.td-event:not(.td-event-booked)'
    }).resizable({
        handles: 'e, w',
        minWidth: width,
        aspectRatio: 0,
        grid: [ width, 0 ]
    });

但当我调整事件大小时，大小从200px变为276px，然后是176px。它不尊重我的[100,0]网格

---

当我调整一个事件的大小时，我能让它尊重100px吗？为了填充整个单元格，

我会考虑如下内容：

 $('.label').draggable({
   snap: '.td-event:not(.td-event-booked)'
 }).resizable({
   handles: 'e, w',
   minWidth: width - 24,
   aspectRatio: 0,
   resize: function(e, ui) {
     var w = ui.size.width;
     var p = $(ui.element).parent();
     var c = Math.floor(p.outerWidth());
     var nw = w + (c - (w % c));
     ui.size.width = nw;
   }
 });

工作示例：

例如，如果

w

为121，而

c

为98，则模数将为23。我们的新宽度为

nw=121+（98-23）

或

nw

为196（2天的宽度）。如果我们再这样做，对于

w

=307、

c

=98和mod=13，

nw

=392或4天

这里需要注意的是，当使用

e

句柄调整大小时，这种方法非常有效。我们只需将

grid

选项添加回address

w

句柄移动

完整示例：

---

你的单元格和里面的Div都有填充。所以你的元素不能增长100倍。你需要使用一个更精确的数字来考虑所有的填充和边距。是的，这太疯狂了，我不认为填充会是一个问题，通过将填充设置为0，它会起作用，我只是对我的内容使用了文本缩进。谢谢

$('.label').draggable({
   snap: '.td-event:not(.td-event-booked)'
 }).resizable({
   handles: 'e, w',
   aspectRatio: 0,
   grid: [98, 10],
   resize: function(e, ui) {
     var w = ui.size.width;
     var p = $(ui.element).parent();
     var c = Math.floor(p.outerWidth());
     var nw = w + (c - (w % c));
     ui.size.width = nw;
   }
 });