Inicjalizuj element i rozpocznij przeciąganie za pomocą jednego kliknięcia.

Question

Na mousedown Chcę wstawić nowy element do DOM i rozpocząć przeciąganie go natychmiast (tj. Wyzwalacz dragstart), bez ponownego klikania nowego elementu.

Często używam d3.js w moim projekcie. Ale nie wiem, czy uda mi się wywołać zdarzenie dragstart za pomocą d3, więc próbowałem przy użyciu jQuery:

$("circle#pen").trigger("dragstart"); 

ale to nie działa.

Oto link do jsFiddle, gdzie mogę zademonstrować swój problem, próbując utworzyć "pióro" pod numerem mousedown, a jeśli użytkownik przeciągnie pióro, rysuje linię. Przy dragend pióro jest usuwane, a linia zanika. Ale pióro musi zostać zainicjalizowane, a następnie może zostać przeciągnięte za pomocą nowego kliknięcia. Ma to jedynie na celu wykazanie problemu.

Oto related question for jQuery, ale nie ma na nie dobrej odpowiedzi.

Answer 1

Znalazłem bibliotekę jQuery o nazwie jquery-simulate. Dzięki zastosowaniu że rozwiązał problem tak:

var coords = { 
    clientX : d3.event.x, 
    clientY : d3.event.y 
}; 

d3.select("g#selects").append("circle") 
    .attr("id", "pen") 
    .attr("r", 10) 
    .attr("cx", coords.clientX) 
    .attr("cy", coords.clientY) 
    .call(dragPen); 

$("circle#pen").simulate("mousedown", coords); 

Element #pen dostaje teraz wstrzykuje i przeciągnij jest inicjowana za pomocą jednego kliknięcia. Jeśli znasz rozwiązanie bez biblioteki takiej jak query-simulate, proszę dać mi znać.

Answer 2

Myślę, że możesz nie rozumieć, jak działa metoda wyzwalacza jQuery. Został zaprojektowany, aby wywoływać kod dołączony do zdarzenia. To nie powoduje, że coś się wydarzy w tym sensie, że wprowadziłby to użytkownik.

Aby rozwiązać problem, należy dołączyć do elementu pewne zdarzenia, które definiują logikę przemieszczania elementów.