This article will show
you how you can create auto scroll while dragging item using jquery in asp.net
mvc. In this I have shown three type of scrolling facility
1 . Scroll With
Default Settings
2 . Scroll With
Sensitivity
3 . Scroll With
Scroll Speed
Some of my previous article are as follows: jQuery
Slider and Range Slider Plugins, Theme
Creation for jQuery Mobile, Move
ListBox Item From one ListBox To another ListBox Using jQuery In Asp.Net, jQuery
Ajax Duplicate UserId Validation in Asp.Net Without Page Refresh Using C#.Net,
Ajax
Login Form Validation Without Page Refresh Using jQuery In Asp.Net and C#.Net,
Bind
and Validate GridView TextBox Value by jQuery In Asp.Net Using C#.
So for this article first I will create a new mvc application and add the below code into view. SO first I have added the jquery library.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
|
Now here is the style sheet and the function.
<style>
#draggableDiv,
#draggable2Div, #draggable3Div
{
width:
100px;
height:
100px;
padding:
0.5em;
float:
left;
margin:
0 10px 10px 0;
background-color:
Blue;
}
</style>
<script>
$(function
() {
$("#draggableDiv").draggable({
scroll: true });
$("#draggable2Div").draggable({
scroll: true, scrollSensitivity: 200 });
$("#draggable3Div").draggable({
scroll: true, scrollSpeed: 200 });
});
</script>
|
Now here is the HTML
<div id="draggableDiv" class="ui-widget-content">
<p>
Scroll With Default Settings</p>
</div>
<div id="draggable2Div" class="ui-widget-content">
<p>
Scroll With Sensitivity - 200</p>
</div>
<div id="draggable3Div" class="ui-widget-content">
<p>
Scroll With Scroll Speed - 200</p>
</div>
<div style="height: 3000px; width: 100%; background-color: Yellow;"></div>
|
Now here is the complete code.
@{
ViewBag.Title = "Auto
Scroll While Dragging Item Using jQuery In Asp.Net MVC";
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
#draggableDiv,
#draggable2Div, #draggable3Div
{
width:
100px;
height:
100px;
padding:
0.5em;
float:
left;
margin:
0 10px 10px 0;
background-color:
Blue;
}
</style>
<script>
$(function
() {
$("#draggableDiv").draggable({
scroll: true });
$("#draggable2Div").draggable({
scroll: true, scrollSensitivity: 200 });
$("#draggable3Div").draggable({
scroll: true, scrollSpeed: 200 });
});
</script>
<div id="draggableDiv" class="ui-widget-content">
<p>
Scroll With Default Settings</p>
</div>
<div id="draggable2Div" class="ui-widget-content">
<p>
Scroll With Sensitivity - 200</p>
</div>
<div id="draggable3Div" class="ui-widget-content">
<p>
Scroll With Scroll Speed - 200</p>
</div>
<div style="height: 3000px; width: 100%; background-color: Yellow;"></div>
|
Now run the application and check the output.
Please check the link for Youtube video. http://youtu.be/6CWH_rlDzRI
DOWNLOAD
About the Author
0 comments:
Please let me know your view