Problemas para arrastrar HTML externo con draggable="true"

Question

Quiero hacer que un elemento html externo se pueda arrastrar a GrapesJS, como cuando puedes arrastrar un bloque y que añada algo.

Tengo una muestra, con un div con draggable="true", un div normal y una imagen. La imagen se arrastra bien y si seleccionas el texto del div normal y lo arrastras, funciona, pero el div con arrastrable="true" no se arrastra correctamente. Quiero que el div se comporte igual que los otros dos elementos y que se añada al editor. https://jsfiddle.net/091wftym/1/

¿Cómo puedo hacer que el elemento div con arrastrable="true" se solte correctamente?

Gracias

artf · Accepted Answer

@Davidvlv HTML5 D&D no funciona así, añadir 'draggable="true"' no es suficiente. Esto solo le dice al navegador "¡Oye, puedes arrastrarme!", pero también tienes que especificar QUÉ quieres arrastrar (usando la API 'dataTransfer.setData'). Aquí tienes tu ejemplo ampliado con la configuración correcta y el uso de 'canvas:dragdata' (solo como ejemplo, no es necesario en este caso) https://jsfiddle.net/artur_arseniev/87rcb24n/

sdrebel · Answer

¿Has probado esto?

editor = grapesjs.init({ ....... dragMode: 'absoluto', // 'absoluto' | 'traducir' ...... })

Y también puedes configurar el modo de arrastre para cada componente. https://grapesjs.com/docs/api/component.html#index

Davidvlv · Answer

Hola @sdrebel Esto no resuelve mi problema. He adjuntado un vídeo mostrando el jsfiddle: fíjate en que el div con arrastrable="true" no se arrastra en el editor. Grapesjs importan draggable.zip

Problemas para arrastrar HTML externo con draggable="true"

Pregunta

Respuestas (3)

Preguntas y respuestas relacionadas

Pregunta: ¿Cómo puedo crear una imagen existente como enlace?

Pregunta: Colores de fondo predefinidos al seleccionar un elemento con una determinada clase o div.

¿Arrastrar y soltar HTML externo en el editor?

¿Cuál es la forma de generar componentes con JavaScript externo?

Plugins de pago que cumplen con este problema

Explorar categorías de plugins