jquery с возможностью сортировки и изменения размера с перекрывающимися элементами списка

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

Я хочу сделать это без перекрытия сортируемых div.

См. Скрипку на http://jsfiddle.net/2J6af/.

РЕДАКТИРОВАТЬ: если вы перейдете к скрипту выше и увеличите ширину сортируемого элемента, затем переместите его и отпустите. Вы увидите, что он перекрывает другие сортируемые элементы. Я хочу, чтобы все сортируемые элементы были расположены так, чтобы не было перекрытий.

РЕДАКТИРОВАТЬ: Я снова прошел с перекрывающимися сортируемыми списками jQuery, как это было предложено @KateA, и хотя он похож, он говорит о перекрытии списков, а не о сортируемых элементах, охватывающих несколько списков.

РЕДАКТИРОВАТЬ: в готовом продукте будет 7 списков бок о бок, и мне нужно переставить сортируемые элементы в определенном порядке после того, как пользователь сбросил элемент. Я знаю, что вы можете добавить функцию к событию sort:, возможно, это ключевая функция для перегруппировки и проверки / исправления любых перекрывающихся сортируемых элементов?

РЕДАКТИРОВАТЬ: Я также заметил, что сортируемый элемент ведет себя по-разному при перетаскивании в зависимости от того, изменили ли вы его размер с помощью левого или правого маркера. Он не понимает, над каким списком вы наводите курсор. например если вы изменили размер с помощью левого маркера, подняли его и попытались бросить в средний или правый список, он переместится в тот список, который будет следующим слева от указателя мыши, а не там, где он показывает пустой заполнитель под мышью указатель.

РЕДАКТИРОВАТЬ: jquery fullCalendar делает именно то, что мне нужно, но как они это сделали? http://arshaw.com/fullcalendar/

РЕДАКТИРОВАТЬ: Я работал над расширением скрипки до степени моих знаний о сортировке, как вы думаете, я на правильном пути? http://jsfiddle.net/2J6af/17/


jquery resizable jquery-ui-sortable
person PaulMrG    schedule 09.04.2012    source источник
comment
Взгляните на stackoverflow.com/questions/ 4092817 / Это мне помогло   -  person KateA    schedule 09.04.2012
comment
Я видел этот пост, прежде чем задавать этот вопрос, но это уже другая проблема.   -  person PaulMrG    schedule 09.04.2012
comment
Можно было связать событие resizable, выяснить, сколько списков теперь охватывает элемент, а затем поместить элементы-заполнители в одну и ту же позицию (тот же индекс) в каждый список, который охватывает элемент.   -  person mikeycgto    schedule 14.04.2012
comment
@mikeycgto, похоже, подходящая идея, но я не знаю, как получить эту информацию из пользовательского интерфейса или как изменить порядок вручную после сброса? В моем четвертом редактировании также есть проблема с перетаскиванием. Я заметил, что fullCalendar позволяет изменять размер только справа, что может помочь.   -  person PaulMrG    schedule 14.04.2012

Ответы (2)


arrow_upward
3
arrow_downward

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

Способ jQueryUI для сортировки - это добавление в список заполнителя, который, естественно (поток страниц), показывает место для drop. Я бы посоветовал этого не делать, я не думаю, что есть способ чисто взломать jQueryUI, чтобы добиться желаемого поведения.

Я бы посоветовал вам сделать то же самое, что и fullcalendar, использовать плагины draggable и resizable и переместить элементы в сторону, используя абсолютную позицию, когда они перекрываются с другими элементами .

Не устанавливайте функцию привязки для перетаскивания, но в зависимости от положения перетаскиваемого объекта вычислите столкновения и решите, как с ними справиться, перемещая их вверх или вниз.

person guzart    schedule 18.04.2012
comment
Спасибо @UberNeet. Как насчет того, чтобы обертка div, которая содержит прокручиваемую сетку оверлея, с содержимым (год за раз (365 div)), добавляемым в начале или добавляемом к обертке div. Могу ли я по-прежнему контролировать размещение событий календаря без слишком большой мощности процессора, перебирая сотни или тысячи div для поиска мест размещения и обновления базы данных с любыми изменениями, внесенными пользователем? Поскольку IE изо всех сил пытается не отставать от нескольких сотен div, все остальные браузеры, которые я тестировал, не имели проблем. - person PaulMrG; 19.04.2012

arrow_upward
2
arrow_downward

Есть несколько проблем с тем, что вы пытаетесь сделать, но мне удалось создать пример, который исправляет некоторые из них. Общая проблема заключается в том, что эти два плагина JQuery UI (с возможностью сортировки и изменения размера) не поддерживают все функции, которые вам нужны, поэтому по крайней мере один, если не оба, придется переписывать или внедрять с нуля. Некоторые проблемы включают:

  1. Западный маркер вызывает увеличение ширины, а свойство css 'left' - уменьшение, вызывая проблемы с элементами списка с левой стороны. Та же проблема существует с востоком и с правой стороны.
  2. Размещение элементов списка «относительное» или «абсолютное» приведет к тому, что они не будут занимать место в потоке страницы, следовательно, они будут перекрываться.
  3. Наличие трех отдельных div означает, что каждый элемент может быть членом только одного списка, и вам нужно проверить ширину, чтобы увидеть, занимает ли он также другие столбцы. Это немного грязно.

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

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

person Billy    schedule 14.04.2012
comment
Привет, @Billy, не могли бы вы обновить - ссылка в примере указывает на мою оригинальную скрипку - person PaulMrG; 15.04.2012
comment
Общий продукт, над которым я работаю, - это календарь с функциональностью событий, аналогичной fullCalendar, но использующий блоки div, а не таблицу. Он вертикально прокручиваемый и непрерывный. Идентификаторы div содержат информацию о том, какой день в формате # quietdDate-2012-04-19, и div содержимого для списков событий # CaldDate-2012-04-19-content. Это может помочь с тем, что вы думаете? - person PaulMrG; 15.04.2012
comment
Если бы мне пришлось перетащить двухдневное мероприятие на четверг, например, перенесет ли мероприятие, которое уже было в четверг, на субботу? - person Billy; 15.04.2012
comment
Нет, список четверга придется переупорядочить, чтобы они оба соответствовали друг другу, как и в fullCalendar. - person PaulMrG; 15.04.2012