初始化元素并只需单击一下即可开始拖动

Question

在mousedown我想在DOM中注入一个新元素并立即开始拖动它(即触发器dragstart),而不再单击新元素.

我在我的项目中经常使用d3.js.但我不知道是否可以dragstart使用d3 触发事件,所以我尝试使用jQuery:

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

但这不起作用.

这是一个jsFiddle的链接,我通过尝试创建一个"笔"来演示我的问题mousedown,如果用户拖动它绘制一条线.在dragend笔被移除,线条消失.但是必须初始化笔,然后可以通过新的点击来拖动它.这只是为了证明问题.

这是jQuery的一个相关问题,但没有很好的答案.

Answer 1

我发现了一个名为jquery-simulate的 jQuery 库。通过使用它，我解决了这样的问题：

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

现在，该元素#pen已被注入，并且只需单击一下即可启动拖动。如果您知道没有像query-simulate这样的库的解决方案，请告诉我。