jQuery UI draggable Options scrollSensitivity

Scroll sensitivity is that when draggable item is being dragged to the edge of the container,
how many pixels the container scrolls.
$("#eleID").draggable({ scrollSensitivity: 100  });

Try to adjust scrollSensitivity by adjusting slider and to drag square to the bottom right corner
and just keeping dragging, to see the difference.
ExampleJquery ui draggable options scrollsensitivity
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({
            scrollSensitivity: 100
        });
        
        $("#slider").slider({
            range: "min",
            value: 100,
            min: 1,
            max: 1000,
            step: 1,
            slide: function (event, ui) {
                $("#info").html("scrollSensitivity : " + ui.value);
                $("#drag1").draggable("option", "scrollSensitivity", ui.value);
            }
        });
    });
</script>

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


comments powered by Disqus