|
|
<!doctype html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="utf-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
<title>jQuery UI Draggable - Auto-scroll</title> |
|
|
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> |
|
|
<style> |
|
|
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } |
|
|
body {font-family: Arial, Helvetica, sans-serif;} |
|
|
table {font-size: 1em;} |
|
|
.ui-draggable, .ui-droppable {background-position: top;} |
|
|
</style> |
|
|
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> |
|
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> |
|
|
<script> |
|
|
$( function() { |
|
|
$( "#draggable" ).draggable({ scroll: true }); |
|
|
$( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 }); |
|
|
$( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 }); |
|
|
} ); |
|
|
</script> |
|
|
</head> |
|
|
<body> |
|
|
<div id="draggable" class="ui-widget-content"> |
|
|
<p>Scroll set to true, default settings</p> |
|
|
</div> |
|
|
|
|
|
<div id="draggable2" class="ui-widget-content"> |
|
|
<p>scrollSensitivity set to 100</p> |
|
|
</div> |
|
|
|
|
|
<div id="draggable3" class="ui-widget-content"> |
|
|
<p>scrollSpeed set to 100</p> |
|
|
</div> |
|
|
<div style="height: 5000px; width: 1px;"></div> |
|
|
</body> |
|
|
</html> |
