Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Ross McVinnie
95
Dialog Window draggable
posted

Is it possible to make a <igx-dialog> draggable? I have the drag and drop behaviours on my dialog window but it doesn't seem to work.

Thanks for your help.

  • 640
    Offline posted

    Hello,

    What I can suggest for achieving your requirement is using the igxDragHandle directive to specify an element that is a child of IgxDialog by which to drag and then handling the dragMove event to set setOffSet of IgxToggle directive of IgxDialog:

    HTML

     

    <igx-dialog #dialog igxDrag [ghost]="false" (dragMove)="dragMoveEventHandler($event)">

         …

         <igx-icon class="dialog__icon" igxDragHandle>drag_indicator</igx-icon>

         …

    </igx-dialog>

    TYPESCRIPT

      public dragMoveEventHandler(e): void {
        const deltaX = e.nextPageX - e.pageX;
        const deltaY = e.nextPageY - e.pageY;
        e.cancel = true;
        this.dialog.toggleRef.setOffset(deltaX, deltaY);
    }
     

    I created a small sample illustrating my suggestion, which you can find here. Please test it on your side and let me know whether you find it helpful.

     

    Please let me know if you have any further questions and concerns.

     

    Regards,

    Viktor Kombov

    Entry Level Software Developer

    Infragistics, Inc.