Блог

Мне нужно ограничить событие изменения порядка Datatable PrimeFaces, чтобы оставить таблицу горизонтально невозможно. При желании я хотел бы добавить границу при перетаскивании элемента, чтобы пользователь мог видеть, куда он может поместить элемент.

Я знаю, что эти функции возможны при обычной функции перетаскивания, как мы можем видеть на витрине Primefaces. Ограничение: https://primefaces.org/showcase/ui/dnd/draggable.xhtml (последний элемент)
Выделите область выпадающего списка: https://primefaces.org/showcase/ui/dnd/custom.xhtml

Я просмотрел doku primefaces, но пока не нашел ничего, что позволило бы ограничить область. Для выделения я попытался использовать ajax-событие, используя onstart с js-функцией, которая устанавливает styleclass для таблицы, но поскольку событие запускается не при перетаскивании, а при отбрасывании, это было не так успешно, как я надеялся.

Минимальный пример основан на демонстрации Primefaces, посвященной изменению порядка. Мой xode является копией showcase (https://primefaces.org/showcase/ui/data/datatable/reorder.xhtml ). Единственное, что я изменил, это ширину таблицы данных, чтобы увидеть, возможно ли по-прежнему перемещать элемент выше границы

Есть ли какой-нибудь способ заставить это работать? Я был бы признателен за любую помощь, заранее спасибо!

Версия PrimeFaces: 6.2

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

 <script>
  jQuery(function() {
    PF('widgetVarTableName').tbody.sortable( "option", "axis", "y" );
  });
</script>
 

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