Функциональность сортируемой сетки JQuery без одинаковых размеров

Question

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

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

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

Answer 1

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

Большинство людей используют

• в качестве сортируемых элементов, и они могут содержать любой контент, который вы хотите. Просто убедитесь, что вы указали «list-style-type: none; margin: 0; padding: 0;» в стиле

Answer 2

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

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

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

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

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

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

для замены элементов (также с className) при перетаскивании

пожалуйста, посмотрите на обсуждение, и, возможно, оно вам поможет.

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

-Вадим

Answer 3

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

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

Для следующего 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;
      }
    }
  });