jQuery: Jak mogę symulować przeciąganie i upuszczanie w kodzie?

Question

EDIT: Oto link, aby pokazać mój przykładowy kod: http://www.singingeels.com/jqtest/

Mam bardzo prostą stronę, która odwołuje jQuery 1.3.2.js, ui.core.js (najnowsza wersja) i ui.draggable.js (także najnowsza wersja).

Mam div, że mogę przeciągnąć wokół bardzo łatwo (za pomocą myszki, oczywiście):

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

, a następnie w javascript:

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

Jest to działa idealnie. Ale muszę mieć możliwość symulowania "przeciągnij i upuść" za pomocą samego kodu. Mam go głównie działa, ale problem polega na tym, że zdarzenia, które są zwalniane, są obiektami zastępczymi.

Jeśli otworzysz „ui.core.js” i przewiń do dołu ... zobaczysz to:

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

Dlaczego nie są wydarzenia zostanie przedłużone prawidłowo w mojej symulacji, ale gdy klikasz myszką, prawda? - Jakieś pomysły dotyczące wymuszania właściwości _mouseDrag: w celu wypełnienia nadpisującego rozszerzenia w "ui.draggable.js"?

Rozwiązanie tego byłoby ogromne - i zamierzam pokazać główne korzyści później.

Dzięki, -Timothy

EDIT: Oto link, aby pokazać mój przykładowy kod: http://www.singingeels.com/jqtest/

EDIT 2: Kliknij ten link powyżej i po wyświetleniu źródła ... zobaczysz co ja próbuję to zrobić. Oto urywek:

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

Istnieje question in the JQuery forum about it. Nie jest rozwiązany w chwili pisania, ale może mieć więcej informacji w przyszłości.

---

EDIT: Został on odpowiedział na forum:

polecam użyć wtyczki symulacyjny, który jest co jQuery UI używa do testów jednostkowych przeciągnij i upuść:

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

Możesz zobaczyć przykłady u se, patrząc na jednostkę testuje

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

Dzięki rdworth za to.

Answer 2

Musisz pokazać kod, którego używasz do "zasymulowania" tego. Mój instynkt jest taki, że musisz zbudować odpowiednie zdarzenia DOM i wystrzelić je, ale nie wiem, czy jQuery ma możliwości wstrzykiwania sztucznych zdarzeń.

Czy można po prostu wywołać procedury obsługi zdarzeń bezpośrednio?

Answer 3

Znalazłem rozwiązanie, które działa całkiem dobrze. Mam wywołanie zdarzenia drop o nazwie onDragAndDrop(). Ta funkcja pobiera dwa argumenty, obiekt jQuery draggable i obiekt jQuery droppable.

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

W moich testach, mam funkcję, która wywołuje onDragAndDrop bezpośrednio, ale zapewnia, że ​​użytkownik za pomocą myszy mogły przeprowadzić tę akcję.

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

znalazłem, że jest to miłe, łatwe w użyciu rozwiązanie do testów jednostkowych. Prawdopodobnie wykorzystam go również do awaryjnego dostępu do klawiatury.