Tek bir tıklamayla öğeyi başlatıp sürüklemeye başlayın

Question

mousedown'da DOM'a yeni bir öğe enjekte etmek ve yeni öğeyi tekrar tıklatmadan hemen sürüklemeye (dragstart tetikleme) başlamak istiyorum.

Projemde çok d3.js kullanıyorum. Ama d3 kullanarak dragstart olayı tetikleyebilir bilmiyorum, o yüzden jQuery kullanarak çalıştı:

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

Ancak bu işe yaramaz.

mousedown'da "kalem" oluşturmaya çalışarak sorunumu gösterdiğim bir jsFiddle bağlantısı var ve kullanıcı kalemi sürüklerse, bir çizgi çizer. dragend'da kalem kaldırılır ve çizgi kaybolur. Ancak, kalem başlatılmalı ve sonra yeni bir tıklama ile sürüklenebilir. Bu sadece problemi göstermek içindir.

İşte bir related question for jQuery, ancak bunun için iyi bir yanıt yok.

Answer 1

jquery-simulate adında bir jQuery kitaplığı buldum.

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

eleman #pen şimdi enjekte alır ve bir sürükle tek bir tıklama ile başlatılır: Böyle sorun çözüldü kullanarak. query-simulate gibi bir kütüphanesi olmayan bir çözümü biliyorsanız, lütfen bana bildirin.

Answer 2

jQuery'nin tetikleme yönteminin nasıl çalıştığını yanlış anlıyor olabilirsiniz. Bir etkinliğe eklediğiniz kodu tetiklemek için tasarlanmıştır. Bir kullanıcının girişinin yapacağı anlamda bir şey tetiklemez.

Sorununuzu çözmek için, öğeleri hareket ettirmek için mantığı tanımlayacak öğeye bazı olaylar eklemeniz gerekir.