Los eventos no se disparan por arrastrar y soltar en lienzo.
El código es sintaxis. Válido. Aquí está un jsfiddle con código https://jsfiddle.net/s9b2k7vp/ Aquí está la demo: https://www.screencast.com/t/pWcpkM7QO
Lee la respuesta completa abajo ↓Pregunta
Hola a todos. El problema es: Los eventos, simplemente no son fuego, después de arrastrarse (dentro) del lienzo. editor.on('canvas:dragover') editor.on('canvas:drop') editor.on('canvas:dragenter') editor.on('lienzo:dragend')
El código es solo el código de la demo del repositorio, añadiendo estos 4 eventos. Aquí está el código:
var editor = grapesjs.init({ mostrar Compensaciones: 1, avisoOnUnload: 0, contenedor: '#gjs', altura: '100%',
> fromElement: cierto,
> storageManager: { autoload: 0 },
> styleManager : {
> sectores: [{
> nombre: 'General',
> abierto: falso,
> buildProps: ['flotar', 'pantalla', 'posición', 'arriba', 'derecha', 'izquierda', 'abajo']
> },{
> nombre: 'Dimension',
> abierto: falso,
> buildProps: ['ancho', 'altura', 'ancho máximo', 'mínimo de altura', 'márgene', 'acolchado'],
> },{
> nombre: 'Tipografía',
> abierto: falso,
> buildProps: ['familia de fuentes', 'tamaño de fuente', 'peso de fuente', 'espaciado entre letras', 'color', 'altura de línea', 'sombra de texto'],
> },{
> nombre: 'Decorations',
> abierto: falso,
> buildProps: ['radio de borde-c', 'color de fondo', 'radio de borde', 'borde', 'sombra de caja', 'fondo'],
> },{
> nombre: 'Extra',
> abierto: falso,
> buildProps: ['transición', 'perspectiva', 'transformación'],
> }
> ],
> },
> });
>
> editor.on('canvas:dragover', function(dt, currentComp) {
> console.log('event canvas dragover', dt, actualComp);
> });
>
> editor.on('canvas:dragend', function(dt, currentComp) {
> console.log('caída de lienzo: ', dt, actualComp);
> });
>
> editor.on('canvas:dragenter', function(dt, currentComp) {
> console.log('dragador de lona', dt, actualComp);
> });
>
> editor.on('canvas:drop', function(dt, currentComp) {
> console.log('caída de lienzo: ',dt, actualComp);
> });
Muchas gracias por responder.Respuestas (3)
El código es sintaxis. Válido. Aquí está un jsfiddle con código https://jsfiddle.net/s9b2k7vp/ Aquí está la demo: https://www.screencast.com/t/pWcpkM7QO
Actualización. Los eventos están activando, pero justo después de que el bloque cae en el lienzo. No estoy seguro de si esto es un problema, porque ¿Y qué hay de event canvas:dragend y canvas:dragover? Si el bloque no cae en la lona, simplemente no disparan en absoluto. Aquí está la demo, por favor mira el vídeo: https://www.screencast.com/t/9xHVwwp3C54J https://jsfiddle.net/s9b2k7vp/2/
Lo siento mucho. El evento no fue un incendio por la versión previa de grapes.js Gracias a todos por la atención.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1875
[PREGUNTA] Cambios de ID al importar HTML o pasar HTML en components prop en config.
Hola, He creado un componente y un bloque que puedo arrastrar y soltar en el lienzo. Mi problema es que algunos estilos dependen del ID. Sé...
Issue #580
[Pregunta] ¿Cualquier evento o evento de disparo cuando se deja caer un bloque dentro del lienzo?
Hola, ¿Cómo puedo activar algún evento cuando se actualiza cualquier bloque o contenido nuevo dentro del canvas? Algo como 'editor.onCanvas...
Issue #905
[Pregunta] necesito encontrar eventos necesarios.
¡Hola a todos! Al arrastrar un bloque al lienzo, y sueltarlo: ... Tenemos un evento que detectar, en qué bloque caemos. ?: pero cuando dejo...
Issue #1903
[BUG] problema con el bloque del mapa
Hola, Hay un problema de "404" al arrastrar y soltar un mapa en el lienzo desde la última versión. El problema también está en tu demo. ¿Sa...
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.