Issue #1890💬 RespondidoAbierto el 13 de marzo de 2019por MACscrReacciones 0

Desactivar la función de arrastre, no la habilidad

Respuesta rápidapor artf

Bueno, en el propio componente, cuando haces clic en mover icono, ejecuta el comando 'tlb-move', así que puedes sobrescribirlo añadiendo uno nuevo con el mismo ID, pero desafortunadamente no hay una forma sencilla de cambiar el comportamiento de arrastre de los bloques. PD. Empecé a trabajar en el modo Diseñador, el d...

Lee la respuesta completa abajo ↓

Pregunta

Quiero crear mis propias habilidades de arrastre y colocación. Me encantan grapesjs, pero realmente quiero tener más control sobre cómo funcionan los elementos arrastrados en el área de edición. ¿Hay alguna forma de desactivar el método incorporado para poder crear el mío propio? Sé que el modo diseñador está en la hoja de ruta, pero necesito la función ahora, así que la voy a añadir yo mismo, pero primero necesito evitar que la función predeterminada de grapesj interfiera con ella. Ya tengo los elementos de posicionamiento y redimensionamiento de arrastre funcionando perfectamente en mi propia app personalizada, así que sé que puedo hacerlo funcionar si encuentro la forma de evitar que la funcionalidad nativa de grapesjs interfiera.

No creo que sea tan sencillo como hacer: data-gjs-draggable="false"

Además, quizá haya alguna forma de dejar eso como verdadero y anular la función que lo gestiona.

Ahora mismo estoy usando las clases arrastrables/redimensionables de jquery para hacerlo con mi propia app. Simplemente envolvo cualquier elemento que añado para que sea seleccionable y editable:

    función make_modifiable() {

console.log('ahora modificable');
        $('.pub_element').arrastrable({
            start: function() {
                setCurrent($(this));
            },
            stop: function() {
                update_html();
            },
            Contención: "padre",
            cancelar: falso
        }).resizeable({
            start: function() {
                setCurrent($(this));
            },
            stop: function() {
                update_html();
            },
            Nombres: "todos"
        });
    }

$(".add_element").on("click", function() {
        var element = $(this).attr('id');
        var dyn_e = botones[elemento];
        si (dyn_e != indefinido) {
            var el = $("<div class='pub_element'></div>");
            el.append($(dyn_e));
            el.appendTo($(".cvtr-modal"));
        }
        make_modifiable();
    });

Agradezco cualquier consejo y todo vuestro gran trabajo en este proyecto. Espero que otros con más experiencia en este proyecto puedan compartir ideas conmigo sobre él. Hay un par de proyectos geniales que ya tienen esta función, pero ni siquiera se acercan a grapesjs en documentación, UX/UI y capacidades, así que espero poder crear esta funcionalidad para mí y para otros para usarla con grapesjs.

Respuestas (2)

artf22 de marzo de 2019

Bueno, en el propio componente, cuando haces clic en mover icono, ejecuta el comando 'tlb-move', así que puedes sobrescribirlo añadiendo uno nuevo con el mismo ID, pero desafortunadamente no hay una forma sencilla de cambiar el comportamiento de arrastre de los bloques.

PD. Empecé a trabajar en el modo Diseñador, el desarrollo es lento pero al menos empezó, espero publicar pronto algún número de seguimiento

lock[bot]21 de marzo de 2020

Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.

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.