0
1K
ViewsMaterial angular, cdk, arrastrar y soltar, soltar e insertar en la posición actual del campo TextArea
Estaba revisando estos ejemplos:
https://jsfiddle.net/qskxzh0e/3/
http://jsfiddle.net/3p1nra6m/1/
y https://stackblitz.com/edit/angular-component-drag
https://material.angular.io/cdk/drag-drop/overview
¿Es posible insertar (sin reemplazar todo el texto contenido) alguna Lista de formulario de Token como cdkDropListDropped o cdkDrag ?
Ya resolví mi pregunta anterior, porque podía insertar en el área de texto, y tengo nuevos desafíos, aquí mi código stackblitz ( perdón por los colores y el parpadeo, porque estaba probando métodos ):
Para este código, implementé una interfaz:
export interface EntryKeyValue { key: string; value: string; }En mi componente tengo una matriz como:
ekvs: EntryKeyValue[] = [ { key: 'first', value: 'First Item' }, { key: 'second', value: 'Second Item' }, { key: 'third', value: 'Third Item' }, ]; En mi HTML me gustaría mostrar la propiedad key , pero en mi Textarea quiero insertar la propiedad de value .
Por ejemplo: debería mostrar 'tercero' , pero debería insertar 'Tercer elemento' en mi área de texto.
¿Cómo hacerlo?
En la matriz de imports de mi archivo app.module.ts he comentado //, DragDropModule porque no se muestra *cdkDragPreview . Para que el usuario sepa cuál es el valor final insertado. ¡Pero mis métodos no funcionan como se muestra en el cuadro inferior derecho!
¿Es compatible DragDropModule con mis métodos?, y ¿cómo usar ambos?
2 answers
Answer question0
Cuando se trabaja con textarea , es mejor usar la API de arrastrar y soltar HTML5 y eso es exactamente lo que usa en su demostración.
Con la función de arrastrar y soltar de Angular CDK, tendrá que detectar la posición del cursor de inserción en el área de texto por su cuenta.
Si desea mostrar un valor pero insertar otro valor, debe pasar el valor deseado al método DataTransfer.setData() .
Simplemente agregue algún atributo en su elemento de arrastre
<div class="example-box" ... [attr.data-drag-data]="ekv.value"Ahora puedes leer ese valor del código ts
event.dataTransfer.setData('text/plain', event.target.dataset.dragData);Actualizar
Para personalizar la vista previa de HTML5 d&d, puede usar el método DataTransfet.setDragImage()
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
Consulte este artículo: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data- * Para agregar sus atributos personalizados y usarlos en su componente Modal.
En su plantilla HTML agregue: [attr.data-value]="ekv.value" dentro del div con 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>Para agregar vistas previas, hice cambios de estilo como ejemplo:
En su componente Modal, edite su dragstart_handler method como:
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."; }Consulte esta publicación también: https://web.dev/drag-and-drop/