Issue #710✓ ResueltoAbierto el 4 de enero de 2018por austinbiggsReacciones 3

Haz que todo un elemento sea arrastrable, no solo el mango

Respuesta rápidapor artf3

Prueba con algo así '''js editor.on('component:selected', () => { const selected = editor.getSelected(); si (!seleccionado || !seleccionado.get('draggable')) return; const el = selected.view.el; si (!el.hasCustomEvent) { el.hasCustomEvent = 1; el.addEventListener('mousedown', () => { editor.runCommand('tlb-move') }) }...

Lee la respuesta completa abajo ↓

Pregunta

Estoy trabajando en modificar el mango de los elementos arrastrables, además de tener un mango, me gustaría que todo el elemento fuera arrastrable. Mirando el código, supongo que solo tendría que adjuntar el comando 'tlb-move' a un elemento arrastrable al selectar.

editor.on( 'component:selected' , function( model ) {
	var selected = editor.getSelected();
	var dragger;

si (!sel || !sel.get('draggable')) {
		console.warn ('El elemento no se puede arrastrar');
		regresar;
	}

console.log( 'Seleccionado: ', seleccionado );
});

El código anterior, al selectar, escribe el componente seleccionado en la consola. A partir de aquí creo que tendría que añadir un oyente de eventos para arrastrar, sin embargo, mis intentos de conectar un oyente usando '.on()' han fracasado. ¿Algún consejo sobre cómo conectar un oyente de eventos a un componente selecto?

Respuestas (3)

👍 Muy útilartf4 de enero de 2018

Prueba con algo así '''js editor.on('component:selected', () => { const selected = editor.getSelected(); si (!seleccionado || !seleccionado.get('draggable')) return; const el = selected.view.el;

si (!el._hasCustomEvent) { el._hasCustomEvent = 1; el.addEventListener('mousedown', () => { editor.runCommand('tlb-move') }) } });

  
Jogai20 de marzo de 2018
Fragmento de códigoTEXT
Seguí tu sugerencia, pero me sale un error: "Uncaught TypeError: No se puede leer la propiedad 'type' de undefined"

editor.on('component:selected', () => {
            const selected = editor.getSelected();
            si (!seleccionado || !seleccionado.get('draggable')) return;
            const el = selected.view.el;
            si (!el._hasCustomEvent) {
                el._hasCustomEvent = 1;
                el.addEventListener('mousedown', () => { editor.runCommand('tlb-move') });
                console.log("debería funcionar");
            }
        });

Si hago clic una vez en un componente, el registro de la consola se ejecuta diciendo "debería funcionar", pero si arrastro, me da el error. ¿Alguna otra sugerencia?
Jogai17 de abril de 2018

¡Muchas gracias por la actualización! Todavía me cuesta un poco implementarlo bien. Puse un ejemplo: https://codepen.io/anon/pen/vRoRBX

El ejemplo es evitar que el usuario haga demasiado. La mayoría de los elementos se hacen no arrastrables. El usuario debería poder reordenar. Tengo varios problemas para seleccionar y arrastrar. Estos son los pasos que sigo y los problemas que encuentro:

  • Haz clic en el punto número 2. Problema 1: El elemento no está seleccionado, solo se resalta.
  • Haz clic en el elemento número 1, ahora se selecciona por el resaltado más grueso.
  • Haz clic en el elemento número 2, que se selecciona. Problema 2: El número 1 permanece 'seleccionado'.
  • Arrastrar (sin hacer clic primero) el elemento número 1 debajo del punto 3. Problema 3: El estado 'seleccionado' no se mueve si arrastras inmediatamente, lo que resulta en arrastrar el número 2 en lugar del número 1.

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.