0
1K
ViewsAngular Material,cdk, Drag & Drop, dropping,and inserting into current position of TextArea Field
I was checking these examples:
https://jsfiddle.net/qskxzh0e/3/
http://jsfiddle.net/3p1nra6m/1/
and https://stackblitz.com/edit/angular-component-drag
https://material.angular.io/cdk/drag-drop/overview
It is possible to insert (no replace all contained text) some Token form List as cdkDropListDropped or cdkDrag?
I already solved my previous question, because I could insert in the Textarea, and I have new chellenges, Here my stackblitz code (sorry for the colors and bliking, because I was testing methods):
For this code, I implemented an interface:
export interface EntryKeyValue {
key: string;
value: string;
}
In my component I have an array like:
ekvs: EntryKeyValue[] = [
{
key: 'first',
value: 'First Item'
},
{
key: 'second',
value: 'Second Item'
},
{
key: 'third',
value: 'Third Item'
},
];
In my HTML I would like to show the key property, but in my Textarea I want to insert the value property.
For Example: I should show 'third', but I should insert 'Third Item' in my textarea.
How to do it?
In the imports array of my app.module.ts file I have commented //, DragDropModule because the *cdkDragPreview is not shown! In order to the user know what is the final value inserted. But my methods are no working as right bottom square shows!!!
Is it compatible DragDropModule with my methods?, and how to use both?
2 answers
Answer question0
When working with textarea it's better to use HTML5 Drag and Drop API and that's exactly what you use in your demo.
With Angular CDK drag and drop you will have to detect insertion cursor position in textarea by your own.
If you want to show one value but insert another value you need to pass desired value into DataTransfer.setData() method.
Just add some attribute on your dragging element
<div
class="example-box"
...
[attr.data-drag-data]="ekv.value"
Now you can read that value from ts code
event.dataTransfer.setData('text/plain', event.target.dataset.dragData);
Update
In order to customize HTML5 d&d preview you can use DataTransfet.setDragImage() method
public dragstart_handler(event: any) {
const preview = event.target.cloneNode(true);
// store it for element so that we can remove it from DOM later on
event.target.preview = preview;
preview.className = 'preview';
preview.style.cssText = `position: absolute; top: -100%; left: -100%;
width: ${event.target.offsetWidth}px; `;
document.body.appendChild(preview);
event.dataTransfer.setDragImage(preview, 0, 0);
...
public dragend_handler(event: any) {
event.target.preview.parentNode.removeChild(event.target.preview);
0
Check this article: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* In order to add your custom attributes and use them in your Modal component.
In your HTML template add: [attr.data-value]="ekv.value" inside of the div with drabggable="true"
<div
class="example-box"
draggable="true"
(drag)="drag_handler($event)"
(dragend)="dragend_handler($event)"
(dragenter)="dragenter_handler($event)"
(dragleave)="dragleave_handler($event)"
(dragover)="dragover_handler($event)"
(dragstart)="dragstart_handler($event)"
(drop)="drop_handler($event)"
[attr.data-value]="ekv.value"
*ngFor="let ekv of ekvs" cdkDrag
>
<div>
<p *cdkDragPreview><span class="blink preview">{{ekv.value}}</span></p>
</div>
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
{{ekv.key}}
</div>
In order to add previews, I made changes styles as example:
In your Modal component edit your dragstart_handler method as:
public dragstart_handler(event: any) {
const crt = event.target.cloneNode(true);
crt.style.backgroundColor = "#D1F8D1";
crt.style.color = "darkred";
crt.style.position = "absolute";
crt.style.borderWidth = "initial";
crt.style.borderStyle = "dashed";
crt.style.borderColor = "blue";
crt.style.top = "-1000px";
crt.className += " blink";
crt.style.right = "0px";
crt.innerText = event.target.dataset.value;
document.body.appendChild(crt);
event.dataTransfer.setDragImage(crt, 0, 0);
//event.dataTransfer.setData('text/plain', event.target.innerText);
event.dataTransfer.setData('text/plain', event.target.dataset.value);
document.getElementById("paragraph2").innerHTML = "Paragraph2: Starting dragging the <span style='color:red'>" + event.target.innerText + "</span> element.";
}
Check this post too: https://web.dev/drag-and-drop/