Haz que todo un elemento sea arrastrable, no solo el mango

Question

Estoy trabajando en modificar el mango de los elementos arrastrables, además de tener un mango, me gustaría que todo el elemento fuera arrastrable. Mirando el código, supongo que solo tendría que adjuntar el comando 'tlb-move' a un elemento arrastrable al selectar. El código anterior, al selectar, escribe el componente seleccionado en la consola. A partir de aquí creo que tendría que añadir un oyente de eventos para arrastrar, sin embargo, mis intentos de conectar un oyente usando '.on()' han f...

artf · Accepted Answer

Prueba con algo así '''js editor.on('component:selected', () => { const selected = editor.getSelected(); si (!seleccionado || !seleccionado.get('draggable')) return; const el = selected.view.el; si (!el.hasCustomEvent) { el.hasCustomEvent = 1; el.addEventListener('mousedown', () => { editor.runCommand('tlb-move') }) } }); ```

Jogai · Answer

Seguí tu sugerencia, pero me sale un error: "Uncaught TypeError: No se puede leer la propiedad 'type' de undefined" editor.on('component:selected', () => { const selected = editor.getSelected(); si (!seleccionado || !seleccionado.get('draggable')) return; const el = selected.view.el; si (!el.hasCustomEvent) { el.hasCustomEvent = 1; el.addEventListener('mousedown', () => { editor.runCommand('tlb-move') }); console.log("debería funcionar"); } }); Si hago clic una vez en un componente, el registro...

Jogai · Answer

¡Muchas gracias por la actualización! Todavía me cuesta un poco implementarlo bien. Puse un ejemplo: https://codepen.io/anon/pen/vRoRBX El ejemplo es evitar que el usuario haga demasiado. La mayoría de los elementos se hacen no arrastrables. El usuario debería poder reordenar. Tengo varios problemas para seleccionar y arrastrar. Estos son los pasos que sigo y los problemas que encuentro:Haz clic en el punto número 2. Problema 1: El elemento no está seleccionado, solo se resalta.Haz clic en el e...

Haz que todo un elemento sea arrastrable, no solo el mango

Pregunta

Respuestas (3)

Preguntas y respuestas relacionadas

Haz que el elemento exterior no sea seleccionable

Solo muestra el elemento "Bloque" bajo el Administrador de bloques

Cómo hacer que el texto de los ajustes sea multilingüe

Miga de pan

Plugins de pago que cumplen con este problema

Tutoriales relacionados

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Explorar categorías de plugins