D3 Collapsible Tree only drag without zoom and jum

Question

EDIT: Fiddle added : http://jsfiddle.net/tLued3x2/2/

I have this Collapsible tree and it is expanding dynamically on click on each node. When the no. of nodes keeps on increasing in horizontal direction then I need to add the drag functionality using D3 in-built drag event. I took help from old similar questions including:

1. Avoid jumping of an SVG Text with text-anchor while dragging

2. D3.js Zooming and panning a collapsible tree diagram

But at the end after lots of searching and hit-trials I got the required functionality using :

 d3.select("svg")
.call(d3.behavior.drag()
    .origin(function() {
    var t = d3.transform(d3.select(this).attr("transform"));
    return {x: t.translate[0], y: t.translate[1]}})
    .on("drag", dragmove));

function dragmove() {
    var x = d3.event.x;
    var y = d3.event.y;
    d3.select("svg g").attr("transform", "translate(" + x + "," + y + ")");
}

But with this code also when I try to drag the tree then it jumps from current mouse position to extreme left or right side of the frame and also when the tree is 8-9 nodes deep horizontally, the drag functionality would not be able to take me to the extreme end node.

So is there any way to control this dragging so that there is minimum possible jumping and smooth dragging to the end node of the tree?

Any help would be appreciated.

Thanks!!!

Answer 1

This can be done using jquery-UI draggable behaviour.

    $('#div-containing-svg')
      .draggable({axis: "x"})
      .bind('mousedown', function(event, ui){
          $(event.target.parentElement).append( event.target );
      })
     .bind('drag', function(event, ui){
      // update left and top
        event.target.setAttribute('x', ui.position.left);
        event.target.setAttribute('y', ui.position.top);
     });

Also the canvas size of the div-conatining-svg must be such that it can be seen when dragged.So size must also need to be controlled.