¿Cómo puedo especificar la posición para arrastrar elementos?
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)
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!
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!
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.
Issue #2297
[Pregunta] Añade un script usando arrastrar y soltar que añadirá elementos dinámicamente
Hola. Gracias por este gran proyecto. Lo estoy usando en uno de mis proyectos y necesito ayuda. 1- Tengo un elemento de bloque con un scrip...
Issue #1113
[PREGUNTAS] ¿El nuevo tipo de rasgo no funciona con los componentes renderizados?
Hola, gracias por el excelente marco. Estoy intentando aplicar esto a mi proyecto. Quiero añadir un nuevo rasgo para el componente existent...
Issue #3004
PREGUNTA: propiedades de estilo personalizadas para cambiar de clase
Hola, Gracias por este buen editor. En mi proyecto, quiero ajustar las clases de componentes usando el gestor de estilos. Por ejemplo, esto...
Issue #2337
[INSECTO / PREGUNTA] Eliminar los estilos predeterminados no funciona
Hola, Estoy intentando eliminar algunos de los estilos predeterminados de los bloques. Escribí todo lo que cambié en un plugin. Utilicé est...
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 →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.