Introduction
How
to implement a simple script to drag elements in a web page. So in this post I
want to illustrate the simplest method I know and use to drag everything in asp.net
pages, using just three rows of JavaScript code.
In this post I provided a very basic script quick to reuse and
customize in your web projects (in the live preview I added some little
additional features respect the content of this tutorial.
Description
Have you ever tried
doing some animation using JavaScript or moving DIVs here well, you know then
how much pain it is as not only you have to tackle the difficult part of
animation but also making it cross browser compatible.
Well you probably know why I am stretching up so hard is just to tell
you how easy it is to use jQuery and JavaScript and do some really fantastic
things without even bothering of knowing how it is done internally
In this small note, I will show you how to do Dragging of a DIV using
jQuery and JavaScript. I will show you the demo of a DIV, which can be dragged
here and there.
Call this JavaScript function on div then this div is movable
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="moovPU.js" type="text/javascript"></script>
ondblclick='void(0);' onmouseover='over=true;' onmouseout='over=false;'
<%@ Page
Language="VB"
AutoEventWireup="false"
CodeFile="Default.aspx.vb"
Inherits="_Default"
%>
<!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>Dragable
Div in Asp.Net Using Javascript by sunil gurjar</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="moovPU.js" type="text/javascript"></script>
<script type="text/javascript">
var
ActiveDivPUid=null;
function
Getdiv()
{
var vLeft
= 0;
var vTop
= 0;
var
vPopDivID = "div";
ActiveDivPUid = vPopDivID;
vLeft = screen.width/3;
vTop = screen.height/4
var
vHtmlContent = '<div id='" +
ActiveDivPUid + "' class='dimmer'>"
+
"<table
cellspacing='0' cellpadding='0' border='0' align='center' >" +
"<tr><td><table
cellspacing='0' cellpadding='0' border='0' align='center' width='100%'
class='legendPU'>" +
"<tr><td
style='background: url(bg.jpg) repeat-x; height: 20px; border-bottom: 1px solid
rgb(204, 204, 204);'>" +
"<table
cellspacing='0' cellpadding='0' border='0' align='center' width='98%'>"
+
"<tr><td
height='20'style='font: bold 11px verdana; cursor: move; height: 18px;' "
+
"ondblclick='void(0);'
onmouseover='over=true;' onmouseout='over=false;'> </td>"
+
"<td
width='25'><img height='15' width='25' onclick='HideActive_PU("
+ $(this).parent().attr("id") + ");' "
+
"alt=''
style='cursor: pointer;' src='close.gif' /></td> " +
"</tr></table></td></tr>"
+
"<tr><td><div
id='GSearchResults' class='legendbox' >"+
" Hi
this is Sunil Gurjar <br/>it is demo of dragable or movable "+
"<div
style='overflow:
auto;'></td></tr></table></td></tr></table></div>';
var
DivContent = document.createElement('div');
DivContent.innerHTML = vHtmlContent;
document.body.appendChild(DivContent.firstChild)
var
objDiv = document.getElementById(ActiveDivPUid);
objDiv.className = 'dimming';
objDiv.style.visibility = "visible";
objDiv.style.left = vLeft + 'px';
objDiv.style.top = vTop + 'px';
}
</script>
<style type="text/css">
div.dimmer{visibility: hidden;position:absolute;left:0px;top:0px;font-family:verdana;
font-weight:bold;padding:40px;background-image:url(honey.png);_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src='honey.png');}
div.dimming{font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;font-style:
normal;background-color: #ffffff;position:absolute;z-index:10000;visibility: hidden;border-style:
solid;border-color: #999999;border-width: 1px;}
.legendPU{font:11px verdana; margin:0; padding:0; border:2px #e1e1e1 solid; width:320px;}
.legendbox{width:300px;height:185px;margin:10px; padding:0;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="Show Div"
onclick="Getdiv()"
/>
</div>
</form>
</body>
</html>
Downloads this tutorial
You can download the complete source
code in C#
No comments :
Post a Comment