jQuery UI Widgets Forums Layouts Layout and Docking Layout After resizing jqxLayout DragDrop element stop working

This topic contains 2 replies, has 2 voices, and was last updated by  Alexey 1 year, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • Alexey

    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.


    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,

    jQWidgets Team


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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.