D3 Drag And Drop

Implementing drag and drop in D3 (http://d3js.org/) is a pretty simple task when you know how to do it, the following is a walkthrough from setup to execution and the events along the way.

First thing we are going to want to do is setup our drag behavior.  This is the object that will be responsible for handling the actual drag and drop, events and will be added to the call chain of the objects of which we want to allow the drag and drop behavior.

var drag = d3.behavior.drag();

The above statement initializes a new instance of the drag behavior.  We can use it to bind this behavior to the call chain of other objects.  Let’s assume we want to allow all nodes having class “draggable” to have this drag and drop behavior.  To do this we simply add the drag behavior we just instantiated to the call chain of the objects:

var drag = d3.behavior.drag();
d3.selectAll(".draggable").call(drag);

It’s that simple, now all objects containing the “draggable” class will now have this behavior.  But what if we need to do something a bit more complex?  What if we need to have other things happen along the way, update other areas during a drag, initialize or change variables on start and end drag.

var drag = d3.behavior.drag()
    .on("dragstart", function(){
        //do some drag start stuff...
    })
    .on("drag", function(){
        //hey we're dragging, let's update some stuff
    })
    .on("dragend", function(){
        //we're done, end some stuff
    });

As you would expect, each on(…) call defines a hook into the event chain of the drag behavior allowing you to customize the behavior as you see fit.

8 thoughts on “D3 Drag And Drop

  1. godlikemouse Post author

    Hi Betsy,

    I believe the element needs to be an SVG element. I tried testing using a div and it doesn’t look like it’s supported. It makes sense being that I’ve only seen D3 used in conjunction with SVG.

    Reply
    1. Betsy McNair

      Wow, Jason, thank you for taking the time to test the functionality on a ! That is so thoughtful. And very helpful!

      Reply
  2. Betsy McNair

    where in a solution do I place this code? I want to make a tooltip draggable. The tooltip is inside a parent . Please let me know what other information you need.

    Reply
    1. godlikemouse Post author

      You’ll want to place this in your initialization. Wherever you’re initializing your D3 stuff, right on that area.

      Reply
      1. Betsy McNair

        Hi Jason,

        So I am working with a complex built solution.

        The tooltip is dynamically build inside a web pack function. Is that where this code would go?

        var drag = d3.behavior.drag();
        d3.selectAll(“.draggable”).call(drag);

        Reply
        1. godlikemouse Post author

          Hi Betsy,

          It’s hard to say without being able to see the application code itself. I’m not familiar with the web pack function you are referring to. I think your best bet is going to be to try and see what happens. If that doesn’t work, try moving it into another initialize type function. Also, ensure the if you’re using d3.selectall(“.draggable”).call(drag) that the drag elements have the the “draggable” class.

          Reply

Leave a Reply

Your email address will not be published. Required fields are marked *