Javascript element dragging with jQuery UI

Question

I have a <div> that displays a graph inside. Sometimes this graph gets too big for the <div>, so I need a way for users to grab the graph with their mouse and move it around. I found the jQuery UI Draggable interaction and thought this is what I need. It was easy enough to get the basics to work, however, I'm having trouble getting this right.

Ideally, the graph can only be dragged to reveal otherwise hidden parts. For example, if there's more graph hidden to the right, then you can drag it to the left and see that hidden part. But then you can't drag it to the left anymore once everything to the right is visible. How do I implement something like this with jQuery UI Draggable? Is it possible? Is jQuery UI the right tool for this?

Less than ideal, but still ok, is that you can drag the graph wherever you want even if the graph is small enough to fit in the parent <div> and nothing is hidden. I can't even get this to work right. What happens is I can just choose not to specify the containment option. Then the graph isn't constrained.. The problem now is the graph's <div> is only a certain size (100% width and height of parent <div>). The nodes are placed with absolute positioning outside this size. Then when you go to drag the graph to reveal those hidden nodes, you can no longer drag the graph... because you're now clicking outside the graph's <div>.

I can maybe have a graph container <div> that I mess with to get things right and dynamically resize that container div as nodes are added or removed.. Or I can implement this without jQuery UI, just using the mousemove event.. What's the best approach? Is there another good library for this?

So, you want to drag your graph around, in the same way that a map can be dragged around in Google maps? This isn't quite what the 'draggable' component of jQueryUI is meant for - it is intended to reposition a whole DOM element, whereas what you want to do is drag the position of a display region within a 'viewport'. Without knowing how your graph works, I can't really offer much advise about how this can be done. — belugabob
– belugabob, Commented Apr 18, 2011 at 9:52
You're right, @gnarf, and have supplied a solution pretty much like the one that I was working on (I'm new to jsfiddle, so it was taking me some time. Nice one @gnarf! — belugabob
– belugabob, Commented Apr 18, 2011 at 10:27

gnarf · Accepted Answer · 2011-04-18 09:56:42Z

4

I think this is what you are looking for - Your container should be overflow:hidden, your graph would be contained in some thing with a width and height, and beyond that you just need to calculate a "constraint" box, which is going to be the .offset() of the container, adding the "extra space" by the calculating "overflowed" portion I.E. only allow dragging the thing from offset.left + container.innerWidth() - draggable.width() -> offset.left

Now, if either of these contraints already "fits" you'll need to make sure to "zero" it to the offset, and if they both fit, skip adding draggable... Put it all together and you get:

var contain = $("#container"),
    big = $("#bigthing"),
    offset = contain.offset(),
    // calculate the "constraints"
    constraints = [
        offset.left + contain.innerWidth() - big.width(),
        offset.top + contain.innerHeight() - big.height(),
        offset.left,
        offset.top
    ],
    // it "fits" if our left/top constraint is higher or equal to the right/bottom
    fitsX = constraints[0] >= constraints[2],
    fitsY = constraints[1] >= constraints[3];


if (!(fitsX && fitsY)) {
    if (fitsX) {
       constraints[0] = constraints[2];
    }
    if (fitsY) {
       constraints[1] = constraints[3];
    } 
    big.draggable({
        containment: constraints
    });
}

Fiddled: http://jsfiddle.net/gnarf/jqy2b/1/

If you need to dynamically resize the draggable thing, just recalculate the containment option!

answered Apr 18, 2011 at 9:56

gnarf

107k26 gold badges129 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

at. Over a year ago

works brilliantly! Great job gnarf, I would've credited you with the answer twice if I could... the containment: constraints option was not documented well at all on the jqueryui site, now I see this is exactly what I needed.

Collectives™ on Stack Overflow

Javascript element dragging with jQuery UI

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related