jQuery: Come si simula il trascinamento e il rilascio nel codice?

Question

EDIT: Ecco un link per mostrarvi il mio codice di esempio: http://www.singingeels.com/jqtest/

Ho una pagina molto semplice che fa riferimento jquery-1.3.2.js, ui.core.js (ultima versione) e ui.draggable.js (anche l'ultima versione).

Ho un div che posso trascinare in giro molto facilmente (usando il mouse, ovviamente):

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

e poi in JavaScript:

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

Questo è funziona perfettamente. Ma ho bisogno di essere in grado di simulare un 'drag and drop' usando solo il codice. L'ho quasi sempre funzionante, ma il problema è che gli eventi che stanno sparando sono gli eventi segnaposto.

Se si apre "ui.core.js" e scorrere verso il basso ... si vedrà questo:

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

Perché non sono gli eventi che si esteso correttamente nella mia simulazione, ma quando fai clic giù con il mouse, sono? - Qualche idea su come forzare _mouseDrag: proprietà a obbedire all'estensione di override in "ui.draggable.js"?

Risolvere questo sarebbe enorme - e ho intenzione di mostrare i maggiori benefici in seguito.

Grazie, -Timothy

EDIT: Ecco un link per mostrarvi il mio codice di esempio: http://www.singingeels.com/jqtest/

EDIT 2: Fare clic su tale link qui sopra e view-source ... vedrai quello che ho sto cercando di fare Ecco uno snippet:

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

C'è un question in the JQuery forum about it. Non è stato risolto al momento della scrittura, ma potrebbe avere più informazioni in futuro.

---

EDIT: E 'stato risposto sul forum:

vi consiglio di utilizzare il plugin simulare che è quello che jQuery UI utilizza per le unità di prova drag and drop:

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

Potete vedere esempi di voi se guardando l'apparecchio test

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

Grazie a rdworth per questo.

Answer 2

È necessario mostrare il codice che si sta utilizzando per "simulare" questo. Il mio istinto è che dovrai costruire gli eventi DOM appropriati e licenziarli, ma non so se jQuery abbia le strutture per iniettare eventi artificiali.

Potresti chiamare direttamente i gestori di eventi?

Answer 3

Ho trovato una soluzione che funziona piuttosto bene. Ho l'evento di rilascio chiama una funzione chiamata onDragAndDrop(). Questa funzione accetta due argomenti, l'oggetto jQuery draggable e l'oggetto jQuery droppable.

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

Nel mio test, ho una funzione che chiama onDragAndDrop direttamente, ma fa in modo che un utente con un topo avrebbe potuto eseguire l'azione.

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); 
    } 

Ho trovato che fosse una soluzione piacevole e di facile utilizzo per i test di unità. Probabilmente finirò per usarlo per un fallback accessibile da tastiera.