-1

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.

enter image description here

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!!!

enter image description here

Is it compatible DragDropModule with my methods?, and how to use both?

1 Answers1

2

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);

Forked Stackblitz

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);

Updated Stackblitz

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • Thanks for your help. But, I have doubt about of how to enable Preview *HTML5 Drag And Drop* replacing the `*cdkDragPreview`? –  Nov 15 '21 at 20:02
  • @Anita I extended my answer – yurzui Nov 16 '21 at 06:35
  • `preview`is an arbitrary property when is used in `event.target.preview`? Is not a property according to documentation. –  Nov 16 '21 at 22:59
  • @Anita Yep, that's just my custom arbitrary property. I use it to store the reference to element that will be acquired by that property and removed from the DOM – yurzui Nov 17 '21 at 06:12