Issue #484💬 RespondidoAbierto el 5 de noviembre de 2017por roytangReacciones 1

¿Puedo restringir qué bloques se pueden colocar en un contenedor?

Respuesta rápidapor roytang1

Esta solución funciona. ¡Gracias!

Lee la respuesta completa abajo ↓

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)

roytang11 de noviembre de 2017

Esta solución funciona. ¡Gracias!

artf6 de noviembre de 2017

@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>',

roytang7 de noviembre de 2017

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.

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.