Инициализировать элемент и начать перетаскивание одним щелчком мыши

Question

В mousedown Я хочу добавить новый элемент в DOM и сразу же перетащить его (т. Е. Триггер dragstart), не нажимая новый элемент еще раз.

Я использую d3.js много в моем проекте. Но я не знаю, смогу ли я вызвать dragstart событие с помощью d3, поэтому я попытался с помощью JQuery:

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

Но это не работает.

Вот ссылка на jsFiddle, где я продемонстрирую свою проблему, пытаясь создать «ручку» на mousedown, и если пользователь перетаскивает перо, он рисует линию. При dragend ручка удаляется и линия исчезает. Но перо должно быть инициализировано, а затем его можно перетащить с помощью нового клика. Это просто для демонстрации проблемы.

Здесь related question for jQuery, но на это нет хорошего ответа.

Answer 1

Я нашел библиотеку jQuery под названием jquery-simulate. Используя, что я решил проблему так:

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. Он предназначен для запуска кода, который вы подключили к событию. Это не означает, что что-то произойдет в том смысле, что вход пользователя будет.

Чтобы решить вашу проблему, вам необходимо прикрепить некоторые элементы к элементу, который определит логику перемещения элементов вокруг.