Inizializza elemento e avvia il trascinamento con un solo clic

Question

A mousedown Voglio iniettare un nuovo elemento nel DOM e iniziare a trascinarlo immediatamente (ovvero trigger dragstart), senza fare nuovamente clic sul nuovo elemento.

Sto utilizzando d3.js molto nel mio progetto. Ma non so se posso attivare l'evento dragstart utilizzando d3, così ho provato ad utilizzare jQuery:

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

Ma questo non funziona.

Questo è un collegamento a un jsFiddle, in cui viene illustrato il mio problema cercando di creare una "penna" a mousedown e se l'utente trascina la penna disegna una linea. A dragend la penna viene rimossa e la linea si attenua. Ma la penna deve essere inizializzata e quindi può essere trascinata da un nuovo clic. Questo è solo per dimostrare il problema.

Ecco un related question for jQuery, ma non ci sono buone risposte ad esso.

Answer 1

Ho trovato una libreria jQuery denominata jquery-simulate. Utilizzando che ho risolto il problema in questo modo:

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

L'elemento #pen ora ottiene iniettata e una resistenza viene iniziato con un solo click. Se conosci una soluzione senza una libreria come query-simulate, faccelo sapere.

Answer 2

Penso che si possa fraintendere come funziona il metodo di trigger di jQuery. È progettato per attivare il codice che è stato allegato a un evento. Non fa scattare qualcosa che avverrebbe nel senso che l'input di un utente lo farebbe.

Quindi per risolvere il problema, è necessario associare alcuni eventi all'elemento che definirebbe la logica per lo spostamento degli elementi.