Making a SVG Text draggable using d3.js

d3.js, drag-and-drop, jquery-ui, svg

Solution

You can use drag.behaviour to add drag events to elements.

1) Create a function to handle the drag event (of type d3.event):

function dragmove(d) {
    d3.select(this)
      .style("top", ((d3.event.sourceEvent.pageY) - this.offsetHeight/2)+"px")
      .style("left", ((d3.event.sourceEvent.pageX) - this.offsetWidth/2)+"px")
}

2) Create drag behavior using the above function as handler:

var drag = d3.behavior.drag()
    .on("drag", dragmove);

3) Bind it to an element or a set of elements using `.call` on a d3 selection:

d3.select("body").append("div")
    .attr("id", "draggable")
    .text("Drag me bro!")
    .call(drag)

Try it: http://jsfiddle.net/HvkgN/2/

Here's the same example, adapted for an svg text element:

function dragmove(d) {
    d3.select(this)
      .attr("y", d3.event.y)
      .attr("x", d3.event.x)
}

var drag = d3.behavior.drag()
    .on("drag", dragmove);

d3.select("body").append("svg")
    .attr("height", 300)
    .attr("width", 300)
    .append("text")
        .attr("x", 150)
        .attr("y", 150)
        .attr("id", "draggable")
        .text("Drag me bro!")
        .call(drag)

Problem

I want to make a text in a d3 visualisation draggable for use in an editor. I started to play with on e of the examples (http://bl.ocks.org/mbostock/4063550). When i add a dragbeheavier to the text element, i can tell from the ChromeDevTools that somthing gets dragged but there is no visual representation af that drag. I also tried to do it using JQuery UI what didn't worked either. What do i miss and is it even possible to do so?

Original source