Resalta zonas de caída
Con la introducción de Canvas Spots creo que esta solicitud de función puede considerarse completa. Aquí tienes un ejemplo rápido de demo https://github.com/GrapesJS/grapesjs/assets/11614725/ea956282-b6bd-455e-af9b-6b5fb7707d71
Lee la respuesta completa abajo ↓Pregunta
Hola @artf,
¿Cómo recomendarías resaltar los componentes en el lienzo donde se puede colocar el bloque seleccionado según reglas arrastrables y soltables? En otras palabras, cuando un usuario empieza a arrastrar un bloque desde el gestor de bloques, me gustaría resaltar (añadir un borde o una sombra de cuadro de inserción) los componentes del lienzo en los que pueda dejarlo. Esto no es para sustituir el indicador de caída (no sé cómo se llama), que muestra dónde se colocará el bloque al arrastrarlo sobre el lienzo, sino que está pensado para complementarlo.
Aquí tienes un ejemplo de lo que quiero crear: ! Fotograma 3
Cualquier ayuda sería muy apreciada.
¡Gracias!
Respuestas (3)
Con la introducción de Canvas Spots creo que esta solicitud de función puede considerarse completa. Aquí tienes un ejemplo rápido de demo
https://github.com/GrapesJS/grapesjs/assets/11614725/ea956282-b6bd-455e-af9b-6b5fb7707d71
Creo que, actualmente, no es fácil lograrlo. El módulo Sorter es bastante antiguo y desordenado, y tendría que refactorizarlo para permitir esa funcionalidad (que, sin duda, me encantaría tener). Por desgracia, no hay fecha estimada para esto :/
Justo estaba pensando en esto. Creo que es la evolución natural y necesaria cuando puedes poner límites sobre dónde algo se puede soltar.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2282
[Editor UI]: Sustituye la Vista actual por los componentes principales de la interfaz del editor
¡Hola! La estructura actualmente utilizada de grapesjs se basa en aprovechar backbonejs concept de vista modelo para implementar el Virtual...
Issue #1745
[Característica]: Permitir importar documentos HTML
Hola equipo, Estamos usando el plugin de boletín grapesjs en nuestro proyecto para importar y previsualizar la plantilla. Estamos teniendo...
Issue #1806
[Característica]: Añadir categoría en rasgos
¡Hola y gracias por tu trabajo! ¿Es posible crear rasgos bajo categorías como bloqueos? Si es posible, ¿quizá usar el objeto Category como...
Issue #3512
Los elementos hijos no se pueden arrastrar, se pueden soltar y se pueden resaltar. también el CSS de todos los elementos hijos que no se insertan en la sección de estilo mientras se desarrolla un componente banner en un plugin
Hola @artf, Estoy intentando desarrollar un plugin sencillo para banners que incluya un encabezado, un subtítulo y un enlace. y cada elemen...
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
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.