Jquery UI 可調整大小 - 調整特定寬度

Question

我正在使用 JQuery UI 創建一種規划。

我希望用戶在計划中調整事件的大小，並且每個事件必須填滿一天（一個單元格）。

這是小提琴： https://jsfiddle.net/ncxqdu4w/

我的代碼：

    // 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 ]
    });

但是當我調整我的事件大小時，大小從 200 像素變為 276 像素，然后是 176 像素。 它不尊重我的 [100, 0] 網格。

我可以在調整事件大小時使其尊重 100 像素嗎？ 填滿整個單元格。

Answer 1

我會考慮以下內容：

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

工作示例： https://jsfiddle.net/Twisty/4tjwrxyo/18/

例如，如果w為 121，而c為 98，則模數將為 23。我們的新寬度將為nw = 121 + (98 - 23)或nw為 196（2 天的寬度）。 如果我們再做一次，對於w = 307， c = 98，mod 為 13， nw = 392 或 4 天。

這里需要注意的是，這在使用e手柄調整大小時效果很好。 我們只需重新添加grid選項以解決w手柄移動。

完整示例： https://jsfiddle.net/Twisty/4tjwrxyo/23/

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