javascript - Initialize element and start dragging with just one click -

on mousedown I want to inject a new element in the DOM and want to start by dragging it instantly I'm using d3.js in my project (i.e., triggering draggart ) without clicking new element again, but I do not know if I want D3 I can trigger the dragstart event, then I tried to use jQuery:

  $ ("circle # pen"). Trigger (" Dragstart ");   
 but it does not work  
 Here is a link, where I try to create a "pen" on  mousedown  , And if the user draws the pen, it pulls a line, the pen has been removed on the  dragend  and the line is thrown but the pen is to be initialized, and then It can be pulled with a new click. This is just to show the problem.  
 Here's one, but there is no good answer.   
 
 
 I found a jQuery library that I used to solve this problem by using:  
  var = {clientX: d3.event.x, clientY: d3.event.y}; .attr ("c", "r", 10) .attr ("cx", coords.clientX) .attr ("Cy", coords.clientY) .call ("cycl") .attr ("id", "pen") (Dragpen); $ ("Circle # pen"). Simulation ("mussudown", cord);   
 Element  #pen  is now injected and one drag is started with only one click. If you know of a solution without a library, please let me know.