¿Puedo restringir qué bloques se pueden colocar en un contenedor?
Pregunta
Mi intención es crear un bloque que permita que solo se dejen caer componentes de imagen (estoy usando el predeterminado de uvapes-blocks-basic) dentro de él.
Tengo el siguiente código de prueba:
comps.addType('image-container',
{
model: defaultModel.extend(
{
Extender propiedades predeterminadas
por defecto: Object.assign({}, defaultModel.prototype.defaults,
{
Droppable: "IMG",
}),
},
{
isComponent: function(el)
{
if(el.tagName == 'DIV' && $(el).hasClass("image-container"))
{
return {type: "image-container"};
}
},
}),
view: defaultView
});
blockManager.add('image-container',
{
etiqueta: 'Contenedor de Imágenes',
Atributos: {Clase:'FA FA-lápiz'},
contenido: '<DIV class="image-container"></DIV>',
categoría: 'Bloques de prueba',
});
Sin embargo, cuando ejecuto el código anterior, lo que ocurre es que no puedo dejar caer un componente de imagen dentro del contenedor de imágenes. El cursor verde de caída solo aparece alrededor de la parte superior/inferior/lateral del contenedor, pero no aparece dentro de él. En realidad, no puedo meter NINGÚN componente dentro.
Más o menos asumí que la propiedad "droppable" podría funcionar igual que la propiedad "arrastrable" en el ejemplo aquí: https://github.com/artf/grapesjs/wiki/Components. La fuente de Component.js dice:
Indica si es posible arrastrar el componente dentro de otros
Consejo: Indica un conjunto de selectores donde pueda dejarse caer dentro
Arrastrable: Cierto,
Indica si es posible dejar caer otros componentes dentro
Consejo: Indica un conjunto de selectores que puedan caer dentro
Droppable: Cierto,
Así que parece que deberían funcionar igual. ¿Estoy haciendo algo mal?
¿Es mejor hacerlo al revés? Es decir, ¿crear un componente de imagen personalizado y restringir su propiedad arrastrable? (Aún no lo he probado, no estoy seguro de si puedo sobrescribir/extender el comportamiento del tipo de imagen por defecto)
Respuestas (3)
Esta solución funciona. ¡Gracias!
@roytang tu código parece estar bien, probablemente el problema sea porque tu componente está "demasiado vacío" y el puntero del ratón no puede entrar. Intenta añadir un poco de relleno y mira si funciona '''js Contenido: '<div class="image-container" style="padding:20px"></div>',
Mmm. Tengo un formato de contenedor de imagen con ancho y altura de 100px. Además, eliminar la propiedad de dropping en el modelo extendido me permite insertar texto e imágenes dentro de él.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1505
añadir filas y secciones que no funcionan
Estoy integrando Grapejs con Angular6. Pero no funciona significa que no aparece en bloques Estoy usando el siguiente código
Issue #1868
Cómo habilitar funcionalidades solo para componentes específicos de la imagen, no para todos
He activado el icono de fa fa-pencil en mis componentes de imagen, pero quiero que solo esté activado en componentes específicos de la imag...
Issue #459
Error al incluir un componente personalizado dentro de otro bloque
Perdón por el título tan vago. No sé cómo describirlo de forma concisa. Tengo un bloque personalizado donde quiero restringir que solo se p...
Issue #1109
[PREGUNTA] Bloques de columna no desplegables en lienzo
Buenos días @artf :) Estoy experimentando un problema similar al de este problema. No puedo dejar caer ningún bloque (texto, imagen, etc.)...
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.