example - jquery drag and drop list

jQuery: ¿Cómo simulo arrastrar y soltar en código?

Question

EDITAR: Aquí hay un enlace para mostrarle mi código de ejemplo: http://www.singingeels.com/jqtest/

Tengo una página muy simple que hace referencia a jquery-1.3.2.js, ui.core.js (última versión) y ui.draggable.js (también la última versión).

Tengo un div que puedo arrastrar muy fácilmente (usando el mouse, por supuesto):

<div id="myDiv">hello</div>

y luego en JavaScript:

$("#myDiv").draggable();

Esto funciona perfectamente. Pero, necesito poder simular un ''arrastrar y soltar'' usando solo el código. La tengo principalmente funcionando, pero el problema es que los eventos que se están activando son los eventos de marcador de posición .

Si abre "ui.core.js" y se desplaza hacia la parte inferior ... verá esto:

// These are placeholder methods, to be overriden by extending plugin
_mouseStart: function(event) { },
_mouseDrag: function(event) { },
_mouseStop: function(event) { },
_mouseCapture: function(event) { return true; }

¿Por qué los eventos no se están extendiendo correctamente en mi simulación, pero cuando haces clic con el mouse, son? - ¿Alguna idea sobre cómo forzar la propiedad _mouseDrag: para obedecer la extensión dominante en "ui.draggable.js"?

Resolver esto sería enorme, y planeo mostrar los principales beneficios más adelante.

Gracias, timothy

EDITAR: Aquí hay un enlace para mostrarle mi código de ejemplo: http://www.singingeels.com/jqtest/

EDITAR 2: haga clic en el enlace de arriba y ver código fuente ... verá lo que estoy tratando de hacer. Aquí hay un fragmento de código:

$(document).ready(function() {
    var myDiv = $("#myDiv");

    myDiv.draggable();

    // This will set enough properties to simulate valid mouse options.
    $.ui.mouse.options = $.ui.mouse.defaults;

    var divOffset = myDiv.offset();

    // This will simulate clicking down on the div - works mostly.
    $.ui.mouse._mouseDown({
        target: myDiv,
        pageX: divOffset.left,
        pageY: divOffset.top,
        which: 1,

        preventDefault: function() { }
    });
});

Answer 1

Encontré una solución que funciona bastante bien. Tengo el evento drop call una función llamada onDragAndDrop() . Esa función toma dos argumentos, el objeto jQuery que se puede draggable y el objeto jQuery que se puede droppable .

$(''.my-drop-target'').droppable({
    drop: function(event, ui) {
        onDragAndDrop(ui.draggable, $(event.target));
    }
});

En mis pruebas, tengo una función que llama a onDragAndDrop directamente, pero se asegura de que un usuario con un mouse podría haber realizado esa acción.

    var simulateDragAndDrop = function(draggable, droppable) {
        if (!draggable.data(''uiDraggable'')) {
            throw new Error(''Tried to drag and drop but the source element is not draggable!'');
        }
        if (!droppable.data(''uiDroppable'')) {
            throw new Error(''Tried to drag and drop but the target element is not droppable!'');
        }
        onDragAndDrop(draggable, droppable);
    }

Descubrí que es una solución agradable y fácil de usar para pruebas unitarias. Probablemente termine usándolo también para un respaldo accesible desde el teclado.

Answer 2

Hay una pregunta en el foro de JQuery al respecto . No se resuelve en el momento de la redacción, pero puede tener más información en el futuro.

EDITAR: Se contestó en el foro:

Le recomiendo que use el complemento de simulación, que es lo que usa jQuery UI para la prueba de unidad arrastrando y soltando:

https://github.com/jquery/jquery-ui/blob/master/external/jquery-simulate/jquery.simulate.js

Puedes ver ejemplos de uso mirando las pruebas unitarias.

https://github.com/jquery/jquery-ui/blob/master/tests/unit/draggable/core.js

https://github.com/jquery/jquery-ui/blob/master/tests/unit/draggable/events.js

Gracias a rdworth por eso.