Issue #850💬 RespondidoAbierto el 8 de febrero de 2018por austinbiggsReacciones 0

Componente:Evento movido

Respuesta rápidapor artf

¿Has probado con Components-&-JS?

Lee la respuesta completa abajo ↓

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)

artf9 de febrero de 2018

¿Has probado con Components-&-JS?

maxtacco14 de abril de 2018

Tengo el mismo problema: no consigo identificar un evento en un componente para escuchar cuando termina el move.

maxtacco14 de abril de 2018

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.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.