JQuery Сортируемые функции сетки без идентичных размеров

Я ищу создать сортируемую (с помощью перетаскивания) сетку, похожую на то, что делает сортировочная сетка JQuery (http://jqueryui.com/demos/sortable/#display-grid). Однако Sortable требует, чтобы вы использовали только div с одинаковыми размерами. Для моих целей каждый блок имеет разную ширину и высоту.

Функциональность, которую я ищу, - это функции привязки к сетке, в то время как "выталкивание" других элементов в сторону. Draggable делает все, кроме как препятствовать их перекрытию и удалению других элементов в сторону.

О, это тоже не должно быть JQuery. Я открыт для использования других методов, если это проще.

Ответ 1

Jquery sortable не требует, чтобы элементы были одинаковыми размерами, как вы можете видеть в моем прототипе здесь: http://brettlyman.net/dashboard/index3.html

Большинство людей используют <ul> как сортируемый контейнер и <li> как сортируемые элементы, и они могут содержать любой контент, который вы хотите. Просто убедитесь, что вы поместили "list-style-type: none; margin: 0; padding: 0;" в стиле <ul> поэтому он выглядит/ведет себя как контейнер.

К сожалению, с сортировкой вы не можете делать сетку свободной формы - элементы должны быть рядом друг с другом в непосредственной близости. В моем прототипе я все плаваю, так что они заполняются вправо, а затем переходят к следующей строке. Тем не менее, у меня есть опция сетки, заданная для изменения размеров моих контейнеров, поэтому я могу применять макет типа сетки.

Думаю, что я опубликую свое решение, если у кого-то будет такая же проблема.

Ответ 2

Короткий ответ:

используйте событие "stop", чтобы пересчитать все элементы сетки в соответствии с их новыми позициями.

Общие комментарии:

сортируемая сетка с размерами переменных элементов - это визуальный беспорядок, поскольку элементы разного размера перемещаются несколько раз, вскакивая вверх и вниз, в то время как вы перетаскиваете один из них; и макет полностью отличается после каждого движения.

Работая над подобной функцией, я разработал плагин jQuery "Swappable" http://www.eslinstructor.net/demo/swappable/swappable_home.html

и недавно я ответил на тот же вопрос относительно этого плагина:

Сменить элементы (с именем класса) при перетаскивании и удалении

Пожалуйста, взгляните на обсуждение и, возможно, это поможет вам.

С наилучшими пожеланиями,

-Vadim

Ответ 3

Я столкнулся с этим вопросом, пытаясь решить проблему для себя.

Я нахожусь на своей первой итерации при попытке обхода: используйте родительский контейнер как droppable. Сообщите, если это работает:

Для следующего HTML:

<div id="sortable">
  <div><div class="handle"></div>1</div>
  <div><div class="handle"></div>2</div>
  <div><div class="handle"></div>3</div>
  ...
</div>

Используя следующий JavaScript:

$('#sortable')
  .sortable({
    handle: '.handle',
    tolerance: 'pointer'
  })
  .droppable({
    drop: function(e, ui) {
      var previousElement = ui.draggable.parent().children().filter(function() {
        var $this = $(this);
        var pos = $this.position();
        return (this != ui.draggable[0]) && (pos.left <= ui.position.left) && (pos.top <= ui.position.top);
      }).last();
      if( previousElement.length ) {
        previousElement.after(ui.draggable[0]);
        ui.draggable.parent().data().sortable._noFinalSort = true;
      }
    }
  });