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

Question

EDIT: Aquí hay un enlace a mostrar 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 todo muy fácilmente (con el ratón, por supuesto):

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

y luego en JavaScript:

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

Se trata funciona perfectamente. Pero, necesito poder simular un 'arrastrar y soltar' usando código solo. Lo tengo funcionando principalmente, pero el problema es que los eventos que se activan son los eventos de marcador de posición.

Si abre "ui.core.js" y desplazarse a la parte inferior ... verá este:

// 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é no están los eventos que se extienda apropiadamente en mi simulación, pero cuando haces clic con el mouse, ¿verdad? - ¿Alguna idea sobre cómo forzar a la propiedad _mouseDrag: obedecer la extensión de anulación en "ui.draggable.js"?

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

Gracias, -Timothy

EDIT: Aquí hay un enlace a mostrar mi código de ejemplo: http://www.singingeels.com/jqtest/

EDIT 2: Haga clic en ese enlace de arriba y ver el código fuente ... verás lo que yo estoy tratando de hacer Aquí hay un fragmento:

$(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

Hay un question in the JQuery forum about it. No está resuelto al momento de escribir, pero puede tener más información en el futuro.

---

EDIT: Se respondió en el foro:

Le recomiendo que use el plugin simular que es la que utiliza jQuery UI para la unidad de arrastre de pruebas y soltar:

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

Puedes ver ejemplos de ti SE mirando a la unidad de prueba

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 para eso.

Answer 2

Debe mostrar el código que está utilizando para "simular" esto. Mi intuición es que necesitarás construir los eventos DOM adecuados y dispararlos, pero no sé si jQuery tiene instalaciones para inyectar eventos artificiales.

¿Podría simplemente llamar a los controladores de eventos directamente?

Answer 3

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

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

En mis pruebas, tienen una función que se llama onDragAndDrop directamente, pero se asegura de que un usuario con un ratón 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); 
    } 

He encontrado que es una solución agradable y fácil de usar para las pruebas unitarias. Probablemente termine usándolo también para un respaldo accesible por teclado.