jQuery: Wie simuliere ich Drag & Drop in Code?

Question

EDIT: Hier ist ein Link Code meiner Probe zu zeigen: http://www.singingeels.com/jqtest/

ich eine sehr einfache Seite, die Jquery-1.3.2.js verweist, ui.core.js (neueste Version) und ui.draggable.js (auch neueste Version).

Ich habe ein div, dass ich sehr leicht schleppen kann (die Maus natürlich mit):

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

und dann in JavaScript:

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

Dies ist funktioniert perfekt. Aber ich muss in der Lage sein, einen "Drag & Drop" mit Code allein zu simulieren. Ich habe es meistens funktioniert, aber das Problem ist, dass die Ereignisse, die ausgelöst werden, sind die Platzhalterereignisse.

Wenn Sie „ui.core.js“ öffnen und nach unten scrollen ... Sie werden sehen:

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

Warum sind nicht die Ereignisse richtig in meiner Simulation erweitert werden, aber wenn du klickst mit der Maus runter, das sind sie? - Irgendwelche Ideen, wie man die _mouseDrag: -Eigenschaft dazu bringt, die überschreibende Erweiterung in "ui.draggable.js" zu befolgen?

Dies zu lösen wäre riesig - und ich plane, die großen Vorteile später zu zeigen.

Danke, -Timothy

EDIT: Hier ist ein Link ist Ihnen mein Beispielcode zu zeigen: http://www.singingeels.com/jqtest/

EDIT 2: Klicken Sie auf den Link oben und view-source ... Sie werden, was sehe ich versuche ich zu tun. Hier ein Schnipsel:

Answer 1

Es gibt eine question in the JQuery forum about it. Es ist zum Zeitpunkt des Verfassens noch nicht gelöst, könnte aber in Zukunft weitere Informationen enthalten.

---

EDIT: Es wurde auf dem Forum beantwortet:

empfehle ich Ihnen das Simulieren-Plugin verwenden, das ist, was jQuery UI verwendet für Unit-Tests per Drag & Drop:

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

Sie können Beispiele für u se durch am Gerät suchen Tests

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

Vielen Dank für das rdworth.

Answer 2

Sie müssen den Code anzeigen, den Sie verwenden, um dies zu "simulieren". Mein Bauchgefühl ist, dass Sie die richtigen DOM-Ereignisse konstruieren und feuern müssen, aber ich weiß nicht, ob jQuery über Möglichkeiten verfügt, künstliche Ereignisse zu injizieren.

Können Sie die Ereignishandler direkt aufrufen?

Answer 3

Ich fand eine Lösung, die ziemlich gut funktioniert. Ich habe das Drop-Ereignis eine Funktion namens onDragAndDrop() aufrufen. Diese Funktion benötigt zwei Argumente, nämlich das 0Q-Objekt draggable jQuery und das Objekt jQuery droppable.

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

In meinen Tests habe ich eine Funktion, die direkt aufruft, onDragAndDrop aber stellt sicher, dass ein Benutzer mit einer Maus, die Aktion durchgeführt haben könnte.

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

Ich habe festgestellt, dass es eine schöne, einfach zu bedienende Lösung für Komponententests ist. Ich werde es wahrscheinlich am Ende auch für ein Keyboard-zugängliches Fallback verwenden.