jQuery Sortable () с оригинальной позицией заполнителя? - PullRequest
Новая
       7

jQuery Sortable () с оригинальной позицией заполнителя?

3 голосов
/ 05 февраля 2010

Есть ли способ, чтобы сортируемый список jQuery отображал местозаполнитель для того места, где находился исходный элемент при перетаскивании одного из них для сортировки?

т.е. когда пользователь идет, чтобы переместить один из LI в моем списке, я хочу, чтобы контур прямоугольника показал, откуда взялся тот, из которого он перетаскивал.

Ответы [ 2 ]

9 голосов
/ 05 февраля 2010

Короткая версия: вы можете использовать обработчик событий start для сортировки оригинального элемента и изменять его внешний вид по своему усмотрению. E.g.:

$(listOfStuff).sortable({
  start: function (e, ui) { 
    ui.item.show().addClass('original-placeholder');
  });

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

Что происходит (насколько я могу судить):

  • Функция start запускается, когда пользователь начинает перетаскивать.
  • Когда пользователь начинает перетаскивать, исходный элемент фактически не перемещается, он просто скрыт. (ui.helper - это отдельный объект, который пользователь перетаскивает). Вызывая ui.item.show (), вы сохраняете это открытым. (Ну, технически он скрыт, а затем сразу скрыт, но я не вижу мерцания.)
  • И тогда вы можете изменить ui.item в соответствии с вашим сердцем. В приведенном выше примере я просто добавил класс, но вы могли бы вместо этого заменить его внутренний HTML и т. Д.

Я не особенно знаком с внутренностями, но я думаю, что другие могут сказать больше о том, как далеко можно продвинуть эту технику.

0 голосов
/ 05 февраля 2010

Если вы знаете место перемещения элемента, у вас может быть подфункция, которая говорит, что, пока li находится в состоянии перетаскивания, у n-го li есть пунктирная граница.

Я не уверен, что смогу вычеркнуть код из головы, но в основном, когда в игру входит сортируемая функция, она перемещает другие элементы списка вверх и вниз в реальном DOM, так, например, , если вы установите для css 3-го элемента списка пунктирную границу, не будет иметь значения, что элементы списка будут перемещаться как сумасшедшие, потому что, если кто-то попадет в это место, будет 3-й элемент списка и, таким образом, получится пунктирная граница .

То, что вы не можете сделать, это оставить слот свободным, пока пользователь перемещает объект (я не верю), так как тогда элементы списка визуально не освобождают место для удаления. По существу, когда вы перетаскиваете элемент, DOM настраивается так, чтобы скользить вверх там, где отсутствовал элемент списка ...

...