Jquery ui draggable constrain in a axis x and given coordinates

Question

I have

<style> .container { position:relative; width:600px; height:400px; overflow:hidden; } .div-inner { position:absolute; top:0px; left:0px; width:7200px; cursor:e-resize; } </style> 

$ (". div-inner"). draggable ({axis: "x"});

 <div class="container"> <div class="div-inner">Drag me!</div> </div> 

I want to hold back the movement to the left and right of the width of the div at 7200 pixels.

if it were a scrollable element, I would skip it on the left: 0px; left: (7200-600) px;

How can I do this with draggable?

Thank you very much!

Answer 1

I found a solution:

  $(".div-inner").draggable({ axis: "x", stop: function(event, ui) { if(ui.position.left>0) { //alert('Return back'); $(".div-inner").animate({"left": "0px"}, 600); } else if(ui.position.left<-6800) { $(".div-inner").animate({"left": "-6400px"}, 600); } } 

Answer 2

There are several examples of restricted movement in the jQuery UI documentation: http://jqueryui.com/demos/draggable/constrain-movement.html

 $(function() { $( "#draggable" ).draggable({ axis: "y" }); $( "#draggable2" ).draggable({ axis: "x" }); $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false }); $( "#draggable4" ).draggable({ containment: "#demo-frame" }); $( "#draggable5" ).draggable({ containment: "parent" }); }); 

You can contain draggable objects in the "parent", "document", "window", [x1, y1, x2, y2], element or selector. You can optionally only allow movement of the x or y axis.