jQuery UI draggable Options scrollSpeed

The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance.
$("#eleID").draggable({ scrollSpeed: 100  });

Try to adjust scrollSpeed by adjusting slider and to drag square to the bottom right corner and just keeping dragging then see the difference.
ExampleJquery ui draggable options scrollspeed
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;

<!-- Javascript -->
    $(function () {
            scrollSpeed: 100
            range: "min",
            value: 100,
            min: 1,
            max: 1000,
            step: 1,
            slide: function (event, ui) {
                $("#info").html("scrollSpeed : " + ui.value);
                $("#drag1").draggable("option", "scrollSpeed", ui.value);

<!-- HTML -->
<div id="info">scrollSpeed : 100</div>
<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>
Slide to adjust dragging scroll speed
<div id="slider" style="width:300px"></div>

comments powered by Disqus