[英]Jquery UI resizable - Resize specific width
I am using JQuery UI to create a kind of planning.我正在使用 JQuery UI 创建一种规划。
I want the user to resize the events on the planning, and each event must fill a day (a cell).我希望用户在计划中调整事件的大小,并且每个事件必须填满一天(一个单元格)。
Here is the fiddle: https://jsfiddle.net/ncxqdu4w/这是小提琴: https://jsfiddle.net/ncxqdu4w/
My code:我的代码:
// 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 ]
});
But when I resize my event, the size goes from 200px to 276px, then 176px for example.但是当我调整我的事件大小时,大小从 200 像素变为 276 像素,然后是 176 像素。 It doesn't respect my grid of [100, 0].
它不尊重我的 [100, 0] 网格。
Can I make it respect 100px when I resize an event?我可以在调整事件大小时使其尊重 100 像素吗? to fill the entire cell.
填满整个单元格。
I would consider something like the following:我会考虑以下内容:
$('.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;
}
});
Working Example: https://jsfiddle.net/Twisty/4tjwrxyo/18/工作示例: https://jsfiddle.net/Twisty/4tjwrxyo/18/
For example, if w
is 121, and c
is 98, the modulus would be 23. Our New Width would be nw = 121 + (98 - 23)
or nw
is 196 (the width for 2 days).例如,如果
w
为 121,而c
为 98,则模数将为 23。我们的新宽度将为nw = 121 + (98 - 23)
或nw
为 196(2 天的宽度)。 If we do it again, for w
= 307, c
= 98, and mod of 13, the nw
= 392 or 4 days.如果我们再做一次,对于
w
= 307, c
= 98,mod 为 13, nw
= 392 或 4 天。
The caveat here is that this works great when resizing with the e
handle.这里需要注意的是,这在使用
e
手柄调整大小时效果很好。 We just add the grid
option back in to address w
handle movements.我们只需重新添加
grid
选项以解决w
手柄移动。
Full Example: https://jsfiddle.net/Twisty/4tjwrxyo/23/完整示例: 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;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.