jQuery UI draggable Options scroll

When you put a draggable item inside a container, and set overflow:scroll, while you are
dragging, container will auto scrolls, if you want to turn container auto-scroll off, you can
set option scroll to false.
$("#eleID").draggable({ scroll: false  });

Try to drag squares to the bottom right corner and just keeping dragging, to see the difference
between scroll set to ture and false.
ExampleJquery ui draggable options scroll
Source Code Expand
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery.ui.touch-punch.min.js"></script>


<!-- CSS -->
<style type="text/css">
.drag {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border: 1px solid black;
    cursor: pointer;
    border-radius: 10px;
    text-algin: center;
    background-color: lightpink;
}
</style>


<!-- Javascript -->
<script>
    $(function () {
        $("#drag1").draggable({
            containment: "#box1",
            scroll: true
        });
        
        $("#drag2").draggable({
            containment: "#box2",
            scroll: false
        });
    });
</script>

<!-- HTML -->
scroll set to <font color="red">true</font>
<div id="box1" style="overflow:scroll;width:500px;height:200px;border:1px solid black;background-color:lightblue">
	<div id="drag1" class="drag"><p>Drag me</p></div>
</div>
<br>
scroll set to <font color="red">false</font>
<div id="box2" style="overflow:scroll;width:500px;height:200px;border:1px solid black;background-color:lightblue">
	<div id="drag2" class="drag"><p>Drag me</p></div>
</div>


comments powered by Disqus