After resizing jqxLayout DragDrop element stop working

[AlexeyParticipant]

Hello,
I faced another problem with jqxLayout. After resizing panel with DragDrop elements they become undraggable. Example is here: https://stackblitz.com/edit/github-tixan9-zv3nxt

And again, I have not so many ideas how to fix it.

[MartinParticipant]

Hello Alexey,

This seems to be an issue.
As a workaround, you can bind to the resize event of the layout: <jqxLayout (onResize)="onResize()"... and implement the following event handler:

onResize() {
    let draggable = document.getElementsByClassName('draggable')[0];
    draggable.outerHTML = '<div class="draggable">Dragme</div>';
    $('.draggable').jqxDragDrop({ dropTarget: $('#container1'), revert: true, revertDuration: 0 });

    let widget = $('.draggable').jqxDragDrop('getInstance');

    $('.draggable').on('dropTargetEnter', (event) => {
      event.args.target[0].style.border = '2px solid #000';
      widget.dropAction = 'none';
    });
    $('.draggable').on('dropTargetLeave', (event) => {
       event.args.target[0].style.border = '2px solid #aaa';
       widget.dropAction = 'default';
    });

    let groupTabbed = <HTMLElement>document.getElementsByClassName('jqx-layout-group-tabbed')[0];
    groupTabbed.style.overflow = 'visible';

    let ribbon = <HTMLElement>document.getElementsByClassName('jqx-ribbon')[0];
    ribbon.style.overflow = 'visible';
  }

This would create the DragDrop widget again when the panels are resized.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[AlexeyParticipant]

Thanks, Martin. Confirm that the workaround you provided is working.

[Author]

Posts