Issue #2310💬 RespondidoAbierto el 5 de octubre de 2019por AbdallaMohammedReacciones 1

¿Cómo puedo especificar la posición para arrastrar elementos?

Respuesta rápidapor pouyamiralayi1

no tengo componentes, estoy usando bloques Según esto: tengo un div con id="drag-here" Supongo que tu bloqueo es algo así: El enfoque para tu bloque de contenedor sería: y para los bloques objetivo: ¡Salud!

Lee la respuesta completa abajo ↓

Pregunta

Hola, estoy haciendo un proyecto con esta librería y quiero especificar la posición para arrastrar componentes en ella Por ejemplo, tengo un div con id="drag-here" y quiero que todos los componentes se arrastren solo en este div

Espero que me entendáis, gracias a todos

Respuestas (3)

pouyamiralayi6 de octubre de 2019

no tengo componentes, estoy usando bloques

Según esto:

tengo un div con id="drag-here"

Supongo que tu bloqueo es algo así:

Contenido: '<div id="drag-here"></div>'

El enfoque para tu bloque de contenedor sería:

editor. BlockManager.add('drag-here',{
    lablel: 'Arrastra aquí',
    content:'<div id="drag-here" data-gjs-droppable="true" style="width:100px;height:100px; background:red;"></div>'
})

y para los bloques objetivo:

editor. BlockManager.add('drop',{
    lablel: 'Drop',
    contenido:'<div data-gjs-draggable="div#drag-here" style="width:50px;height:50px; background:blue;"></div>'
})

¡Salud!

pouyamiralayi5 de octubre de 2019

tengo un div con id="drag-here" quiero que todos los componentes se arrastren solo en este div

Si con esto quieres decir que todos los componentes solo puedan arrastrarse en tu componente objetivo, puedes usar la propiedad ''arrastrable'' (https://grapesjs.com/docs/api/component.html#properties). Al especificar la capacidad de arrastre en tus componentes de esta manera:

arrastrable: 'objetivo, objetivo *'

¡Salud!

AbdallaMohammed6 de octubre de 2019

especificando la posibilidad de arrastrar en tus componentes así:

Gracias por la rápida repetición, pero no tengo componentes que usen bloques

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 →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.