jQuery draggable в сетке

Question

Возможно, это отчет об ошибке или, возможно, это моя ошибка. Пробыв целый день, я больше не знаю ответа.

Как вы можете попробовать по ссылке ниже моих изменяемых размеров панелей сетки, не работает. Перемещение ящиков в сетке работает идеально, но при изменении размера это выглядит так, как у resizable есть задержка или что-то в этом роде. Когда вы перемещаете курсор быстрее, он просто не привязывается. Если вы переместите поле панели по ящику (и отпустите мышь после перемещения одного окна), она отлично работает.

Что я до сих пор пробовал: обновляя новейшую версию jQuery и jQuery-UI, пытаясь использовать разные размеры сетки (сама сетка 40х40, перетасованная сетка 40х40, но чтобы позволить изменяемую работу я должен был изменить размер сетки до 70x70. Почему это?)

$(function(){ 
    $(".panel") 
    .draggable({ grid: [40,40], containment: $('.container') }) 
    .resizable({ grid: [70,70], containment: $('.container') }) 
}); 

Это известная проблема или я сделал что-то не так?

jQuery demo YouTube demo

Answer 1

Один из способов сделать это было бы регулировать size{ width, height} вручную во время изменения размера.

Рабочий пример: https://jsfiddle.net/Twisty/1j71x38j/

JQuery

$(function() { 
    $(".panel ") 
    .draggable({ 
     grid: [40, 40], 
     containment: $('.container') 
    }) 
    .resizable({ 
     //grid: [70, 70], 
     containment: $('.container'), 
     resize: function(event, ui) { 
     if (ui.size.width % 40 != 0) { 
      var off = ui.size.width % 40; 
      if (off <= 20) { 
      ui.size.width = ui.size.width - off; 
      } else { 
      ui.size.width = ui.size.width + off; 
      } 
     } 
     if (ui.size.height % 40 != 0) { 
      var off = ui.size.height % 40; 
      if (off <= 20) { 
      ui.size.height = ui.size.height - off; 
      } else { 
      ui.size.height = ui.size.height + off; 
      } 
     } 
     } 
    }); 
}); 

Использование Mod 40, можно определить, если ширина или высота соответствует вашей сетки. Если остаток меньше половины, мы уменьшаем размер до следующей сетки; в противном случае мы увеличиваем размер до следующей сетки.