Javascript 初始化元素并开始拖动，只需单击一次

在

mousedown

中，我想在DOM中插入一个新元素，并立即开始拖动它（即触发

dragstart

），而不必再次单击新元素

我在我的项目中经常使用d3.js。但是我不知道是否可以使用d3触发

dragstart

事件，所以我尝试使用jQuery：

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

但这不起作用

这里有一个指向的链接，我通过尝试在

mousedown

创建一个“笔”来演示我的问题，如果用户拖动笔，它会画一条线。在

dragend

处，笔被取下，线条逐渐消失。但是笔必须初始化，然后可以通过新的单击拖动它。这只是为了演示问题

---

这里有一个问题，但没有很好的答案。

我认为您可能误解了jQuery的触发器方法的工作原理。它设计用于触发附加到事件的代码。它不会触发用户输入可能会触发的事件

---

因此，为了解决您的问题，您需要将一些事件附加到元素上，以定义移动元素的逻辑。

我发现了一个名为jQuery的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

现在被注入，只需单击一下即可开始拖动。如果您知道一个没有类似库的解决方案，请让我知道。

好的，但是嗯。。我想我正在将拖动事件附加到元素？！我使用

d3.behavior.drag（）

并在元素上调用它。查看代码的提琴（这里的注释不太合适）。@TimSeguine我同意，这不是一个好的解决方案。但这就是我在2013年的结局。您的解决方案是什么？根据您所描述的，我可能会将事件处理程序放在允许“笔”工作的区域。鼠标向下会像您之前那样附加“笔”。mousemove处理程序更新“笔”位置。鼠标移动处理程序删除“笔”。没有真正的理由坚持使用拖拽行为，除非有比你在问题中描述的更多的东西。@TimSeguine好的，谢谢：）好吧。。我不记得具体的用例（我不再从事那个项目了）。我认为问题是简化了如何创建并开始拖动一个元素的问题，只需使用一个

mousedown

。我只是肯定有更好的方法来解决实际问题。但如果成功了，那才是最重要的。