Question

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

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

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

但这不起作用。

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

这是related question for 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这样的库的解决方案，请告诉我。

Answer 2

我认为你可能误解了jQuery的触发方法是如何工作的。它旨在触发您附加到事件的代码。在用户输入的意义上，它不会触发某些事情。

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

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

2 个答案: