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

Initialize element and start dragging with just one click

本文关键字：一下 拖动 开始 元素 单击 初始化      更新时间：2023-09-26

在mousedown，我想在DOM中注入一个新元素，并立即开始拖动它（即触发dragstart），而不需要再次单击新元素。

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

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

但这行不通。

这里有一个指向jsFiddle的链接，我在这里通过尝试在mousedown创建一个"笔"来演示我的问题，如果用户拖动笔，它会画一条线。在dragend处，笔被移除并且线条逐渐消失。但是笔必须被初始化，然后可以通过新的点击来拖动它。这只是为了说明问题。

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

我发现了一个名为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现在被注入，并且只需单击一次就可以启动拖动。如果你知道一个没有类似库的查询模拟的解决方案，请告诉我。

我想您可能误解了jQuery的触发器方法是如何工作的。它的设计目的是触发附加到事件的代码。它不会像用户的输入那样触发某些事情的发生。

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

相关文章：