Introduction
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.
Getting Started
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();
Implemented Drag And Drop
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.
Conclusion
I hope this simple approach helps in the understanding of how drag and drop works with regards to D3. Feel free to reach out if you have any questions or need help and I’ll do what I can to assist. Thanks for stopping by.
8 Comments
Betsy McNair · May 6, 2016 at 1:05 pm
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.
godlikemouse · May 6, 2016 at 8:11 pm
You’ll want to place this in your initialization. Wherever you’re initializing your D3 stuff, right on that area.
Betsy McNair · May 9, 2016 at 8:52 am
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);
godlikemouse · May 9, 2016 at 9:42 am
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.
Betsy McNair · May 9, 2016 at 10:23 am
Another question. Is it possible to drag a or must the element be an svg?
godlikemouse · May 11, 2016 at 9:19 pm
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.
Betsy McNair · May 12, 2016 at 2:42 am
Wow, Jason, thank you for taking the time to test the functionality on a ! That is so thoughtful. And very helpful!
godlikemouse · May 12, 2016 at 10:23 am
Sure thing 🙂 Glad to help.