时间戳

首页 > 解决方案 > Jquery UI resizable - 调整特定宽度

javascript - Jquery UI resizable - 调整特定宽度

问题描述

我正在使用 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] 网格。

当我调整事件大小时，我可以让它尊重 100px 吗？填满整个单元格。

标签： javascriptjqueryjquery-ui

解决方案

我会考虑以下内容：

 $('.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，并且是 98，则模数将为 23。我们的c新宽度将为196（2 天的宽度）。如果我们再做一次，对于= 307、= 98 和 13 的模数，则= 392 或 4 天。nw = 121 + (98 - 23)nwwcnw

这里需要注意的是，这在使用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;
   }
 });

推荐阅读