D3 Drag Behavior
  Duration: 18:44
Part of Course: Intermediate D3 Course
This Lesson is for subscribers

D3-drag-behavior_280x158
Unlock this lesson NOW!
  • Get expert advice on D3 Drag Behavior
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!

Takeaways:

  • The D3 Drag behavior, d3.behavior.drag(), constructs a drag behavior that creates an event listener to handle the drag gesture (mouse and touch) on the element you apply the drag behavior onto
  • The D3 Drag Behavior is interesting because it involves the compound event of interacting with an element by clicking or touching, dragging staid element, and finally de-clicking or stopping the touch
  • To that end, the D3 Drag Behavior listens to three specific events name - the "dragstart", "drag", and "dragend"
  • The "dragstart" and "dragend" events can be left undefined, whereas the "drag" event must be defined
  • The definition of the "drag" event has to do the actual moving of the element(s) that you are dragging - which usually means changing the attribute value pairs of the elements you selected to drag
  • The d3.behavior.drag() D3 Drag Behavior provides for you the absolute "x" and "y" coordinates of the element that is being dragged inside of the variable d3.event (d3.event.x and d3.event.y)
  • To ensure the offset between the mouse position and the starting element position during the drag, the D3 Drag Behavior provides the origin method, drag.origin(Object), which keeps track internally of this offset
  • If the D3 Drag Behavior origin is not used, then you will notice a jump on the screen when the element commences the drag behavior
  • Using Math, you can limit the D3 Drag Behavior to an enclosure of your choice - in this example, we create and use a bounding area outside of which the D3 Drag Behavior cannot drag an element outside of

This Transcript is for subscribers.

D3-drag-behavior_280x158
Unlock this D3 Tutorial NOW!
  • Get expert advice on D3 Drag Behavior
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!
<< Back To D3 Screencast and Written Tutorials Index