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
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..