1

I want to be able to stop / cancel the dragging action once it has started, for example pressing Esc key. I'm working basing on a Primefaces Showcase example. https://www.primefaces.org/showcase/ui/dnd/dataTable.xhtml

<h:form id="carForm">
    <p:dataTable id="availableCars">
        <p:column>
            <h:outputText id="dragIcon" styleClass="ui-icon pi pi-plus"/>
            <p:draggable id="draggable" for="dragIcon" revert="true" helper="clone"/>
        </p:column>
    </p:dataTable>

    <p:outputPanel id="droppedArea">
        <!-- Here, there is a datatable where dragged rows are shown -->
        <p:dataTable id="selectedCars">
            ...
        </p:dataTable>
    </p:outputPanel>

    <p:droppable for="droppedArea" tolerance="touch" datasource="availableCars">
        <p:ajax listener="#{actionView.onDrop}" update="availableCars selectedCars" />
    </p:droppable>
</h:form>

In the keyup event, I have tried a lot of things to revert the drop event or even to send the event to a not dropped position. I also have tried to modify the PrimeFaces.widget.Droppable.prototype.bindDropListener function.

<script type="text/javascript">
    //detect Escape key press
    document.addEventListener("keyup", function(event) {
        if(event.keyCode === 27){
            $('.ui-draggable:data(draggable)').draggable( 'option',  'revert', true ).trigger( 'mouseup' );
        }
    });
</script>
Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
FMCR
  • 87
  • 6

1 Answers1

3

So this is tricky and I had to use this myself to fix a bug in DataTable drop/drop. You have to get access to the Jquery Drag Drop Manager and cancel all events.

var dragdrop = $.ui.ddmanager.current;
if (dragdrop) {
    document.body.style.cursor = 'default';
    dragdrop.cancel();
}
Melloware
  • 10,435
  • 2
  • 32
  • 62
  • Thanks for your response. I have tried that before. It stop the drag action but the ajax listener (actionView.onDrop) is executed and the new element is added to the list. The ajax listener shouldn't be executed. – FMCR Aug 28 '20 at 13:39
  • Ahh so the AJAX PF code is still subscribed and firing. Hmm that is trickier! – Melloware Aug 28 '20 at 14:33
  • 1
    How about `PrimeFaces.ajax.Queue.abortAll()` to abort all PF AJAX requests? – Melloware Aug 28 '20 at 14:35