Draggable in jquery.


In this article I'm trying to explain why do we are using jquery and how to simplify the scripts using jquery plugins and how to implement dragging option using simple jquery script. i.e. Allow elements to be moved by using mouse.

Draggable in Jquery:


In this article I'm trying to explain why do we are using jquery and how to simplify the scripts using jquery plugins and how to implement dragging option using simple jquery script.

Why do we go for Jquery:


This is the basic question while we are working with jquery plugins. The reason behind this is, browser compatibility, faster execution, easy to implement etc.. There might be some other reason we go for jquery.

Explanation:


Now, we go and discuss about Draggable selection using jquery plugins, follow below steps to achieve this.

• First off all simply download the jquery plugins by using below link Jquery Plugins

• Once download the plugins then add those plugins into Project Scripts folder.

• Once the plugins are added into project scripts folder then added the references by using script.

<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>


• After adding scripts then design your page and call that div id in jquery draggable function.

<script type="text/javascript">
$(function () {
$("#divdraggable").draggable();
});
</script>

Code:



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Draggable.aspx.cs" Inherits="Jquery_Section___1.Draggable" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="Stylesheet" href="Styles/CSSStyles.css" />
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript">
$(function () {
$("#divdraggable").draggable();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="divdraggable">
Drag me..
</div>
</div>
</form>
</body>
</html>




Conclusion:



I refer this article from Jquery Demos. This article may helpful to you those who are beginners to jquery plugins.


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: