Drag and Drop zones with d3?

[Jason Graves]

I'm hoping this is a quick question.  I've been tasked with building a rich web interface that requires a user to drag balls into a "drop zones" on the edge of the page.  I am trying to figure out if d3 can be used for the whole interface, or if there's a better approach I should be taking.  The image below represents a full-screen concept with the orange boxes being drop zones.   The balls will actually be linked to words, which I'll collect when they are dropped.  I haven't really seen any examples on d3 where shapes are being dropped into zones like this.  Any nudge in the right direction would be very helpful.  Thanks,  Jason

[Drew Winget]

This is a rather fully featured example with circular drop zones.

https://bl.ocks.org/robschmuecker/7880033

The basic idea is that you draw a shape like any other and them bind mouseover and mouseout event to it. If there is a mouseup event within your shape, and something is currently being dragged, then it is dropped into that area.

On Monday, 15 February 2016, Jason Graves <jasono...@gmail.com> wrote:

I'm hoping this is a quick question.  I've been tasked with building a rich web interface that requires a user to drag balls into a "drop zones" on the edge of the page.  I am trying to figure out if d3 can be used for the whole interface, or if there's a better approach I should be taking.  The image below represents a full-screen concept with the orange boxes being drop zones.   The balls will actually be linked to words, which I'll collect when they are dropped.  I haven't really seen any examples on d3 where shapes are being dropped into zones like this.  Any nudge in the right direction would be very helpful.  Thanks,  Jason

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Drew Winget]

Sorry, mouseup = dragend above. You'll see in the example. 

Also: https://github.com/mbostock/d3/wiki/Drag-Behavior

And 

http://bl.ocks.org/enjalot/1378144

[Jason Graves]

Thanks, Drew

That helps!