1

It's pretty easy to constrain a jQuery draggable to an axis like this:

$("#object").draggable({ axis: "x" });

But how can I constrain it to both x and y? IOW, I want to allow both vertical and horizontal movement but nothing else (imagine rooks on a chess board).

Robot
  • 1,045
  • 4
  • 14
  • 23
  • possible duplicate of [How to make jQuery draggable with fixed X and Y axis?](http://stackoverflow.com/questions/1572950/how-to-make-jquery-draggable-with-fixed-x-and-y-axis) – j08691 Mar 10 '12 at 22:05
  • Possible dup of that post, but it's from 2009. Has there really been no native (non-plugin) way of constraining drag movement to both axes instead of just one? – Robot Mar 10 '12 at 22:11
  • http://jqueryui.com/demos/draggable/#constrain-movement – Mottie Mar 10 '12 at 22:26
  • @fudgey - Perhaps I missed it, I didn't see where in the docs it mentions how to constrain an object to two dimensions at the same time. Can you be a little more specific? – Robot Mar 10 '12 at 23:29
  • hiya, +1 for the question have you tried this [code] $( "#objectbar" ).draggable({ axis: "y" }); $( "#objectfoo" ).draggable({ axis: "x" }); ? keen to help you out if you need help. – Tats_innit Mar 10 '12 at 23:36
  • hiya again, try this man - http://stackoverflow.com/questions/6398854/jquery-draggable-with-ease ; there is a sectio update:constraint axis draggable: [code] - $.fn.draggableXYE hope it helps! – Tats_innit Mar 10 '12 at 23:53
  • @tats_innit - From your fist comment, the issue is I want #objectfoo to be constrained on both x and y. Your example shows two different objects with the different constraints on each. Think of a rook on a chess board. It is a single object that can only move vertically or horizontally for any one move. About your 2nd comment, I was hoping to avoid 3rd party plugins if possible. Thanks for the comments though! – Robot Mar 11 '12 at 00:23
  • @Robot: If you look at the demo code, you can see that there is a [`containment` option](http://jqueryui.com/demos/draggable/#option-containment), just add a selector to contain the object within that element: `$("#draggable").draggable({ containment: selector }); – Mottie Mar 11 '12 at 13:36

1 Answers1

1

Just add this it works

$("#object").draggable({ axis: "x,y" });
Tarik FAMIL
  • 439
  • 5
  • 9