HAZAÑA: Un evento al que engancharse antes de que un bloque cayera al suelo
Hola @chrisijoyah ¿has probado a usar 'canvas:dragdata'? Aquí un ejemplo de uso https://jsfiddle.net/artur_arseniev/87rcb24n/
Lee la respuesta completa abajo ↓Pregunta
ADVERTENCIA
LEE y SIGUE los siguientes 3 pasos, luego ELIMÍNALOS antes de publicar el número
- Seguir las Directrices de CONTRIBUCIÓN https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md
- Haz una BÚSQUEDA rápida primero, para ver si alguien más no abrió el mismo problema
- Todas las afirmaciones/preguntas relativas deben ser rellenadas/respondidas, de lo contrario, el asunto podría quedar CERRADO
- Plantilla de inicio de JSFiddle https://jsfiddle.net/szLp8h4n
- Plantilla de inicio de CodeSandbox https://codesandbox.io/s/1r0w2pk1vl
¿Qué intentas añadir a GrapesJS?
Describe tu solicitud de función detallado Actualmente hay un evento para enganchar a 'canvas:drop' que te da acceso al modelo que se cae. Antes de que un bloque se deje caer dentro del lienzo, me gustaría hacer algunas comprobaciones antes de montarlo y crearlo. Por ejemplo, algo como 'canvas:before:drop' te daría acceso al 'modelo' antes de que se haya montado y creado y, al devolver 'true', sigue añadiendo y montando el modelo, pero al devolver 'false' impide que el bloque se añada al lienzo. Esta función estaría bien, ya que no consigo encontrar ningún otro evento adecuado al que conectarme para esto.
¿Hay alguna alternativa en la última versión?
- Sí (describe la alternativa)
- No
¿Está relacionado con algún problema?
- Sí (Da un enlace al número)
- No
Respuestas (4)
Hola @chrisijoyah ¿has probado a usar 'canvas:dragdata'? Aquí un ejemplo de uso https://jsfiddle.net/artur_arseniev/87rcb24n/
Hola @chrisijoyah probaste a usar 'canvas:dragdata'? Aquí un ejemplo de uso https://jsfiddle.net/artur_arseniev/87rcb24n/
¿Significa esto que puedo evitar que el modelo que se haya dejado de añadir al lienzo? Idealmente, quiero hacer algunas comprobaciones para determinar si el bloque arrastrado puede dejarse caer en una sección y, si no pasa las comprobaciones, quiero evitar eso antes de añadirlo. ¿Hay alguna forma de hacerlo? ¿Puedo hacer algo como 'result.content= '''
o algo así...
'''js editor.on('canvas:before:drop', (model) => { si (condición) { regreso fiel; } return false; });
¿Puedo hacer algo como result.content= ''
Sí, deberías poder hacerlo con ese truco. ¿Puedes contarme más sobre tu caso de uso, qué tipo de comprobación intentas realizar?
Gracias por informar de esto, @chrisijoyah.
Gran sugerencia sobre FEAT: ¡Un evento al que engancharse antes de que un bloque cayera al lienzo! Aunque esta función específica aún no está en la API principal, existen varias formas de lograr un comportamiento similar.
Usando el sistema de eventos: '''javascript editor.on('component:update', (component) => { Tu lógica aquí });
**Enfoques alternativos:**
- Escuchar 'selector:add' para cambios en el selector CSS
- Usar 'selector:custom' para reglas personalizadas
- Aprovechar los eventos 'change:*' para un seguimiento detallado
- Crear un plugin que extienda el editor con esta capacidad
**Lo hace oficial:**
Si esta función beneficiaría a muchos usuarios, considera abrir una Solicitud formal de Funcionalidad en el repositorio GrapesJS con:
- Un caso de uso detallado
- Ejemplo de código que muestra el comportamiento deseado
- Por qué esto es importante para tu flujo de trabajo
El equipo central es receptivo a solicitudes de funcionalidades bien motivadas respaldadas por casos de uso reales.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3458
HAZAÑA: AÑADIR BLOQUES PERSONALIZADOS (es decir, iframe) y personalizarlo como imagen, es decir, al hacer doble clic abre las opciones de assets para enlace de vídeo en un bloque iframe personalizado
ADVERTENCIA LEE y SIGUE los siguientes 3 pasos, luego ELIMÍNALOS antes de publicar el númeroSeguir las Directrices de CONTRIBUCIÓN https://...
Issue #3668
No puedo reiniciar el lienzo después de moverlo/escalarlo
ADVERTENCIA LEE y SIGUE los siguientes 3 pasos, luego ELIMÍNALOS antes de publicar el númeroSeguir las Directrices de CONTRIBUCIÓN https://...
Issue #3313
Se requieren muchos clics para que el texto sea editable, ¿podemos hacer que el campo de texto sea editable con un solo clic?
ADVERTENCIA LEE y SIGUE los siguientes 3 pasos, luego ELIMÍNALOS antes de publicar el númeroSeguir las Directrices de CONTRIBUCIÓN https://...
Issue #3364
HAZAÑA: @How fijar el tamaño del contenedor cuando estamos arrastrando el elemento dentro del contenedor, el contenedor se gastará según el elemento arrastrado hijo. Cómo podemos dimensionar automáticamente el elemento hijo según el contenedor padre. El contenedor no debe gastarse según el elemento hijo. Debería ser de mostrar scroll.
ADVERTENCIA LEE y SIGUE los siguientes 3 pasos, luego ELIMÍNALOS antes de publicar el númeroSeguir las Directrices de CONTRIBUCIÓN https://...
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.
Tutorial
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.