Make d3 div mutable by dragging and dropping

Question

Question:

I have implemented the version of the d3.js tree found here .

Now, in my case, the tree does not accept the entire screen, but it fits comfortably in a div , since this is just part of the created panel.

Here is the css div where the tree is placed:

 #tree-container { border-style: solid; border-width: 3px; border-color: #b0c4de; float:left; position:relative; top:2px; margin-top: 5px; margin-left: 10px; } 

I want to do the following: when the user clicks on the border of the div - to resize by dragging the mouse cursor (when clicked, of course).

---

What have i tried so far?

So far I have tried as shown in the accepted answer here :

 $('#tree-container').resizable({ handles: 'n,w,s,e', minWidth: 200, maxWidth: 400 }); 

But that does not work. In fact - this causes an error:

 Uncaught TypeError: undefined is not a function 

When I try like this:

 $('#tree-container').resize({ handles: 'n,w,s,e', minWidth: 200, maxWidth: 400 }); 

it does not cause an error, but it still does not work.

This doesn't work either:

 $('#tree-container').resize({ handles: 'n,w,s,e' }); 

Any ideas on how I can solve this problem?

Answer 1

You can achieve this only with d3. No need for jQuery user interface.

You need to create an absolutely positioned div inside the resizable div and add drag and drop behavior to it.

Here is jsFiddle . Drag the orange rectangle to resize.

Here is the relevant code:

 var resizable = d3.select('#resizable'); var resizer = resizable.select('.resizer'); var dragResize = d3.behavior.drag() .on('drag', function() { // Determine resizer position relative to resizable (parent) x = d3.mouse(this.parentNode)[0]; // Avoid negative or really small widths x = Math.max(50, x); resizable.style('width', x + 'px'); }) resizer.call(dragResize);