Issue #2581💬 RespondidoAbierto el 18 de febrero de 2020por JogaiReacciones 0

Cómo usar componentes

Respuesta rápidapor pouyamiralayi

Hola @Jogai también debes especificar el ''data-gjs-draggable'' en el ''''<td>: ¡Salud!

Lee la respuesta completa abajo ↓

Pregunta

Usando GrapesJS 0.15.10 no consigo que los componentes funcionen como pretendía. Probablemente sea cosa mía, así que si es una pregunta, no dudes en cambiar el título del número. (es una continuación de https://github.com/artf/grapesjs/issues/2195)

He hecho un bolígrafo (espero que no pasa nada, no vi las plantillas de fiddle) para mi ejemplo: https://codepen.io/jogai/pen/yLNJgLZ?editors=1011

Veo el mismo comportamiento en Chrome y Firefox.

Se espera que haya una fila con texto que no sea seleccionable, arrastrable o resaltado, pero que en su lugar la fila tenga texto que se pueda arrastrar al otro componente.

Atributos esperados del componente:

data-gjs-selectable="false" data-gjs-highlightable="false" data-gjs-hoverable="false"

Pero en su lugar, los atributos son:

data-gjs-type="cell" draggable="true" data-highlightable="1"

Data-GJS-type está bien, los otros tienen un valor incorrecto, hoverable falta por completo, uno está perdiendo data-GJS por completo y otro no tiene la parte -GJS-.

Respuestas (3)

pouyamiralayi18 de febrero de 2020

Hola @Jogai también debes especificar el ''data-gjs-draggable'' en el ''''<td>:

            <tablewidth="770" cellpadding="0" cellspacing="0" style="background-color:#CAD;">
                <tr style="display:block;padding:15px;">
                    <td data-gjs-draggable="false" data-gjs-selectable="false" data-gjs-highlightable="false">
                        Texto componente 1
                    </td>
                </tr>
                <tr style="display:block;padding:15px;">
                    <td data-gjs-draggable="false" data-gjs-selectable="false" data-gjs-highlightable="false">
                        Texto componente 2
                    </td>
                </tr>
            </table>

¡Salud!

Jogai19 de febrero de 2020

Gracias. Al menos eso es una mejora, pero aún así no se tienen en cuenta las demás propiedades, y si intentas arrastrarlo (ya que las flechas de arrastre siguen apareciendo) aparece un error y entonces todo el editor queda en un estado roto. He actualizado el ejemplo.

Jogai20 de febrero de 2020

Actualicé el ejemplo. Es una especie de continuación de https://github.com/artf/grapesjs/issues/2195

Mi suposición es errónea en que draggable necesita el prefijo data-gjs, porque la parte html sin usar componente tampoco lo tiene. Aun así, el TD hijo no se considera parte del componente.

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.