Drag and Drop in TextArea

[pop1989bb]

Hi guys,

I want to implement drag and drop for the TextArea component.

<TextArea
            onDragOver={ev => {
                ev.preventDefault();
            }}
            onDrop={ev => {
                ev.preventDefault();
                const data = ev.dataTransfer.getData("text/plain");
                //...how to continue her? How to place 'data' into the textarea at the wished position (carret)?
            }}
            onDragEnd={ev => {
                ev.preventDefault();
            }}
        />

I get the data but how can i set the caret position or let the TextArea insert the dropped text?

Please excuse the bad formatting. I tried dfferent ways to format the source code in a good way. How can I do this?

[Lukas742]

Hi @pop1989bb

I'm not entirely sure what you're trying to achieve. Could you please create an example using this stackblitz template? This way it's easier for us to assist you.

Please excuse the bad formatting. I tried dfferent ways to format the source code in a good way. How can I do this?

You can use a single backtick for code formatting inside a text, or three backticks for a code-block. You can find out more about this here.

[pop1989bb]

Hi @Lukas742,
thank you.
I hope this example is availble (never used this before)
Example
I simply want to place the "drag me" for example before the word "has". But I cannot detect the selection or set a selection.
I edited the source code in the message as well. Hopefully it explains my target better.

[Lukas742]

Hi @pop1989bb

inserting a text at the current cursor position via drag and drop is not easily achievable. Most probably you'll need some calculations based on cursor position, fontSize, lineHeight, etc. The same goes for native textarea elements.

The ui5-textarea component doesn't expose the selectionStart property, so if you feel like this should be possible, please open a feature request in the ui5-webcomponents repo, since the component is developed there.

Since the ui5-textarea uses a textarea internally, it's still possible to read the selectionStart property, although you'll have to access theshadowRoot for this. I've created an example of an implementation that inserts the text at the last selectionStart position, which you can find here: https://stackblitz.com/edit/github-rad2p1-hspsn1?file=src%2FTextAreaWithDnD.tsx,src%2FApp.tsx

[pop1989bb]

Hi @Lukas742 ,
thank you (oder auch Danke ;-)) for this example.
I will check it out and let you know.
In my opinion it would makes sense for creating something like this.
I will create a feature request.

[pop1989bb]

Hi @Lukas742 ,

did work as expected. Thank you for the solution. Will create a feature request.