0

I need to restrict the reorder-event of a PrimeFaces Datatable, so that leaving the table horizontally isn't possible . Optionally I would like to add a border when an element ist dragged, so that the user can see, where he can drop the element.

I know that these functions are possible under the normal Drag and Drop-function, as we can the in the Primefaces showcase. Restriction: https://primefaces.org/showcase/ui/dnd/draggable.xhtml (last Element)
Highlight of the Droparea: https://primefaces.org/showcase/ui/dnd/custom.xhtml

I went through the doku of primefaces, but yet haven't found anything that would make it possible to restrict the area. For the Highlight i tried to use the ajax-event, by using the onstart with a js-function which sets a styleclass to the table, but since the Event isn't triggered while dragging but by dropping, this wasn't as successful as I hoped.

The minimal example is based on the Primefaces Showcase dealing with Reorder. My xode is a copy of the showcase (https://primefaces.org/showcase/ui/data/datatable/reorder.xhtml). The only thing I changed is the width of the datatable to see, wether it's still possible to move the element above the border

Is there any way to get this worked? I would appreciate any assistance, thanks in advance!

PrimeFaces Version: 6.2

Sheena
  • 107
  • 9

1 Answers1

0

I found an approach, that might work for me. I added some JQuery and set the axis after the following way

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

Hint
At the moment I'm facing the problem, that the dragged element expands to the whole display width and the code is only run once, but perhaps this approach will help others..

Sheena
  • 107
  • 9
  • To get rid of the Problems I had, i used CSS.P Primefaces has the styleclasses ui-draggable ui-draggable-dragging so i used these to fix the left position an change the width – Sheena Jan 07 '21 at 08:31
  • Hint: while dragging (in my case) there ist an helper object at the bottom of the dom with the following styleclasses: ui-datatable ui-widget ui-sortable-helper. Maybe this also helps – Sheena Jan 07 '21 at 08:34