In this
article I will show you how you can create auto scroll draggable div control with auto scroll using jquery in your html, asp.net and mvc application.
Some of my
previous articles are as follows: jQuery
UI Droppable Component With Drag and Drop Item Functionality, jQuery
UI Draggable Div Control, jQuery
UI Selectable To Select By Pressing Shift and Ctrl Button, jQuery
UI Resizable Div Control.
So for this article first we will create a new html file and add the below reference into the page header.
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
|
Now we will
create a div control for dragging it.
<div id="divdraggable"
class="ui-widget-content
draggable">
<p>Scroll Div Default
Settings</p>
</div>
<div style="height: 3000px; width: 1px;"></div>
|
After this
we will create a jQuery function for this function will make the div auto scrollable.
<script>
$(function () {
$("#divdraggable").draggable({
scroll: true });
});
</script>
|
In above code I have used jquery ui draggable function. Now please check the complete code of the page.
<html lang="en">
<head>
<title>Auto Scroll
Draggable Div Control Using jQuery</title>
<style>
.draggable {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 0 10px 10px 0;
background-color: gray;
}
</style>
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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 () {
$("#divdraggable").draggable({
scroll: true });
});
</script>
</head>
<body>
<div id="divdraggable"
class="ui-widget-content
draggable">
<p>Scroll Div Default
Settings</p>
</div>
<div style="height: 3000px; width: 1px;"></div>
</body>
</html>
|
Now we have
done run the application to check the output.
About the Author
0 comments:
Please let me know your view