Jquery Изменяемый размер пользовательского интерфейса - Изменение размера, заданное c ширина - PullRequest
Новая
       25

Jquery Изменяемый размер пользовательского интерфейса - Изменение размера, заданное c ширина

0 голосов
/ 22 апреля 2020

Я использую JQuery пользовательский интерфейс для создания своего рода планирования.

Я хочу, чтобы пользователь изменил размеры событий в планировании, и каждое событие должно заполнять день (ячейку).

Вот скрипка: 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 пикселей, затем 176px например. Это не соответствует моей сетке [100, 0].

Могу ли я сделать так, чтобы она соответствовала 100px при изменении размера события? заполнить всю клетку.

1 Ответ

0 голосов
/ 22 апреля 2020

Я хотел бы рассмотреть что-то вроде следующего: 

 $('.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 и мода 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;
   }
 });
...