Haz que todo un elemento sea arrastrable, no solo el mango
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)
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') }) } });
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?¡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.
Issue #744
Haz que el elemento exterior no sea seleccionable
Estoy intentando que el elemento exterior no sea seleccionable y que el interior sea solo seleccionable El elemento exterior es la etiqueta...
Issue #1138
[Pregunta] Solo muestra el elemento "Bloque" bajo el Administrador de bloques
No estoy seguro de si se supone que debe ser así, pero cloné el repositorio y npm se inició. Solo puedo ver el elemento "Bloquear"; no se p...
Issue #1239
Cómo hacer que el texto de los ajustes sea multilingüe
Hola @artf, Hemos integrado la configuración de cada elemento con el nombre de sus elementos usando el código de abajo como AJUSTES DE TÍTU...
Issue #1423
[PREGUNTAS] Miga de pan
Hola @artf, Ahora estoy trabajando en crear una miga de pan similar al LayerManager, pero me gustaría saber si ya existe algún método que m...
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 →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.