Componente:Evento movido
Pregunta
Lo que intento conseguir: Tengo un fragmento de código que necesito ejecutar cuando un componente está "dropeado". He puesto "dropped" entre comillas, porque necesita disparar cuando termina el movimiento tlb.
Así que, como usuario, si hago clic en el icono de Mover en la barra de herramientas, al terminar de mover el componente necesito que mi código se ejecute. He probado bastantes eventos sin éxito: stop:tlb-move, change:canvasOffset, focus y move-composición; todo sin éxito.
El contenido del editor que cargo contiene una instancia de Flexslider (que crea estilos adicionales de marcado/elemento) que se rompe cuando el usuario mueve el contenedor del Flexslider. Para solucionar esto, espero poder reiniciar el deslizador inmediatamente para que no se rompa.
¿Hay algún otro evento que pueda usar para ejecutar mi código? Evito 'component:updated' porque se dispara demasiadas veces.
Otra reflexión que he tenido es: ¿hay alguna forma de actualizar la fuente de verdad en el editor? De esta manera tiene el html tal y como debe estar, ya almacenado en su modelo.
Respuestas (3)
¿Has probado con Components-&-JS?
Tengo el mismo problema: no consigo identificar un evento en un componente para escuchar cuando termina el move.
Así que, la única forma en que pude que funcionara razonablemente fue escuchando el evento "selectedComponent" que se activa en https://github.com/artf/grapesjs/blob/b62e032b06f45382849b59e6a3f32049f0a021fc/src/commands/index.js#L168 en el método init() de mi modelo de componentes:
'''javascript editor.on('change:selectedComponent', (editor, model) => { If (modelo === esto) { hacer cosas... } });
Sería genial que hubiera eventos dedicados al comando mover, como mover:inicio y mover:fin.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1727
[PREGUNTA] Evento para que los niños vean
Tengo un problema con un componente. Cuando dejo caer un componente en el lienzo, creo un objeto sencillo. Antes de añadir este objeto nece...
Issue #1355
[PREGUNTA] Evento de redimensionamiento de componentes
Tengo un componente 'canvas' y necesito poder registrar eventos de redimensionamiento para él. Después de revisar el código y buscar evento...
Issue #701
Modificar un componente en el editor elimina el contenido del modelo
Lo que intento conseguir: Tengo atributos especiales de "datos-" en algunos de los componentes que extrao al editor. Cuando uno de estos se...
Issue #897
Cómo hacerlo: encontrar algún componente en Canvas, en el evento "component:add"
Hola a todos, Supongamos que he añadido <form> bloqueo en el lienzo. Cuando añado el siguiente <form> (segunda vez), Necesito comprobar: si...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.