d3.js - How can I listen mouse events from d3 when jquery drag & drop is in action? -

i'm planning use jquery drag dom nodes on svg , drop them d3 can handle drop. this question gave me starting point.

when listen mousemove event d3, d3 not seem track mouse move during jquery's drag operation. i'd make d3 respond drag before drop, , need track drag has been started jquery outside of svg.

i've modified fiddle question above demonstrate approach not working. can see here

here code fiddle:

var treecreator = function(){};      treecreator.prototype.callbacktest = function(svgcontainer){   alert('the element has been dropped');   };     treecreator.prototype.createtreenode = function(thesvg){       $('#tobedropped').remove();       thesvg.append("circle")         .style("stroke","green")         .style("fill","white")         .attr("r",40)         .attr("cx", 100)         .attr("cy", 100)         .on("mouseover", function () {             d3.select(this).style("fill", "aliceblue");         })             .on("mouseout", function () {             d3.select(this).style("fill", "red");         });   };    $(document).ready(function(){      $('#tobedropped').draggable({containment:'#maincontainer'});  var thesvg = d3.select('#dropinsvg') .append("svg") .attr("width",200) .attr("height",200);  var positionlabel = thesvg.append("text")                 .attr("x", 10)                 .attr("y", 30).text("begin log");  thesvg.on("mousemove", function () {             var position = d3.mouse(this);              positionlabel.text(position);         });  var tc = new treecreator();   $('#dropinsvg').droppable({     drop: function(){         tc.createtreenode(thesvg);      } });    }); 

mousemove listener updates label correctly when jquery drag not in action, fails during drag. performs updates unpredictable , incomplete.

is i'm trying possible @ all?

this might me more of hack solution, listen drag

function updateposition() {   var position = d3.mouse(thesvg.node());    positionlabel.text(position); }  var dragging = false;   $('#tobedropped').draggable({   containment: '#maincontainer',   start:       function() { dragging = true; },   stop:        function() { dragging = false; },   drag:        updateposition });  thesvg.on("mousemove", function () {   if (dragging) return;    updateposition(); });