javascript - ondrag - Lanza programáticamente HTML5 dragstart después de mousemove

javascript ondrag event

Question

Actualmente estoy luchando con HTML5 drag''n drop ya que me gustaría lograr algo específico.

Tengo un div que se puede arrastrar utilizando la API de HTML5, pero solo quiero que se produzca el arrastre si el usuario realmente lo quiere decir (ya que desencadena más controladores más adelante).

Es por eso que disparo un dragstart cuando se dragstart una determinada condición desde mousemove .

var fnMousemove = function (oEvent) {
    if (myCondition) {
        document.removeEventListener("mousemove", fnMousemove);
        oDraggable.setAttribute("draggable", true);
        oDraggable.addEventListener("dragstart", fnDragstart);
        oDraggable.addEventListener("drag", fnDrag);
        oDraggable.addEventListener("dragend", fnDragend);

        // Fire a dragstart event, now that we know what to do with it
        var e = document.createEvent("MouseEvents"); //$NON-NLS-1$
        e.initEvent("dragstart"); //$NON-NLS-1$
        oDraggable.dispatchEvent(e);
    }
};

Pero como ya puedes adivinar, eso no funciona en el sentido de que el dragstart está dragstart correctamente, pero no hay otro evento de drag ( drag , dragend ...).

¿Hay algo que no estoy manejando adecuadamente allí? ¿O puede ver una solución alternativa para iniciar la operación de arrastrar y soltar desde un controlador de mousemove? (el botón del mouse se mantiene presionado)

¡Gracias por adelantado!

Puede encontrar un ejemplo de ejecución simple aquí

Answer 1

Parece que el mecanismo que normalmente dispara dragstart anticipa los otros eventos que generalmente siguen a dragstart y los dispara en consecuencia.

Por lo tanto, si está disparando el evento dragstart usted mismo, también deberá implementar el resto del flujo del proceso usted mismo.

Para resolver su problema en particular, le sugiero que cree la experiencia del usuario de la siguiente manera:

1. instruir al usuario para que haga clic en el área correspondiente para permitir el arrastre
2. después de que el usuario ha hecho clic en el área, muestre una retroalimentación para indicar que ahora se puede usar el arrastre.

Simplemente significa que lo que debes buscar es cómo mejorar la experiencia del usuario en función del estado actual de la API de arrastrar y soltar.