Offline
Online
Viewers

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.

[codesyntax lang=”javascript”]

var drag = d3.behavior.drag();

[/codesyntax]

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:

[codesyntax lang=”javascript”]

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

[/codesyntax]

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.

[codesyntax lang=”javascript”]

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

[/codesyntax]

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 Comments

  1. 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.

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

  2. 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.

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

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

        1. 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.

          1. Another question. Is it possible to drag a or must the element be an svg?

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliates