Provide Text inside the draggable content.

[Ekaanth]

Hello, Thanks for the API which is helping me a lot. I'm just wondering how to provide a textarea and input box inside a div and be able to type in the text. Currently, which is not possible even if I place an input type text then I'm not able to enter any text. is there a solution to it?

Thanks.

[xieziyu]

@Ekaanth I think you might set [preventDefaultEvent] to true. Turning it off can make it work. But if you need to set [preventDefaultEvent], I suggest to use handle to drag div. Only handle element will be affected by [preventDefaultEvent].

[Ekaanth]

This code worked for me.

<div ngDraggable class="drag-block" (edge)="checkEdge($event)" (started)="onStart($event)" (stopped)="onStop($event)" (movingOffset)="onMoving($event)" [preventDefaultEvent]="false" (endOffset)="onMoveEnd($event)" [bounds]="myBounds" [inBounds]="inBounds">
                        <textarea name="" id="" cols="30" rows="1"></textarea>
                    </div>

Thanks for your support it worked for me. Now, I have a button on click of that is displaying the div, is it possible for me to get multiple divs on click of the button multiple times and all those draggable divs should be different from others so that I can enter different text msg in different draggable div.

Thanks.

[xieziyu]

@Ekaanth Sure, you can use an array to store multiple blocks and use *ngFor to render multiple draggable div.

A simple example:

<div *ngFor="let b of blocks">
    <div ngDraggable class="drag-block">
        <textarea></textarea>
    </div>
</div>

<button (click)="addBlock()"></button>

blocks = [];

addBlock() {
    this.blocks.push({ text: '' });
}

[Ekaanth]

Hello sir, thanks for your help, and I have a doubt, is it possible to know the x and y position in % not in 'px' because with the change in the screen resolution the position of the element should be same.

[xieziyu]

@Ekaanth Currently, it only supports translating by length not percentage. Maybe we can support this feature in future.

[Ekaanth]

Thanks a lot @xieziyu