Jquery UI resizable - Resize specific width

Question

I am using JQuery UI to create a kind of planning.

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/

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. It doesn't respect my grid of [100, 0].

Can I make it respect 100px when I resize an event? to fill the entire cell.

Answer 1

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/

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). If we do it again, for w = 307, c = 98, and mod of 13, the nw = 392 or 4 days.

The caveat here is that this works great when resizing with the e handle. We just add the grid option back in to address w handle movements.

Full Example: 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;
   }
 });