Post
Ask Question
dilip kumar

dilip kumar

  • NA
  • 29
  • 0

check my code..how to move the control with in div tag

Jan 15 2009 9:09 AM
in div tag having one Image control.i want to move this control with in div tag only...


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default9.aspx.vb" Inherits="Default9" %>

<!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>Untitled Page</title>
<script type="text/javascript" src="drag.js" ></script>
<script language="javascript">

function DragImg(obj)
{
//passing seleted Image Id.
var square = DragHandler.attach(document.getElementById(obj));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="dZone" style="position:absolute;top:16px; left:104px; width:768px; overflow:auto; height:392px; border: 1px solid #ff9900 ; background-color:White" onmousedown="clearFocus(this);" >
 <img src="FileIcons/folder-B4-6-icon.jpg" id="img1" style="left: 56px; position: relative; top: 32px" onmouseenter="DragImg('img1');"/></div>
</div>
</form>
</body>
</html>






*****************************************
*****************************************
drag.js
******************************

var DragHandler = {
// private property.
_oElem : null,
// public method. Attach drag handler to an element.
attach : function(oElem)
{
oElem.onmousedown = DragHandler._dragBegin;
// callbacks
oElem.dragBegin = new Function();
oElem.drag = new Function();
oElem.dragEnd = new Function();
return oElem;
},
// private method. Begin drag process.
_dragBegin : function(e)
{

var oElem = DragHandler._oElem = this;
if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }

var x = parseInt(oElem.style.left);
var y = parseInt(oElem.style.top);

e = e ? e : window.event;
oElem.mouseX = e.clientX;
oElem.mouseY = e.clientY;

oElem.dragBegin(oElem, x, y);
document.onmousemove = DragHandler._drag;
document.onmouseup = DragHandler._dragEnd;
return false;
},

// private method. Drag (move) element.
_drag : function(e)
{
var oElem = DragHandler._oElem;
var x = parseInt(oElem.style.left);
var y = parseInt(oElem.style.top);

e = e ? e : window.event;
oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';

oElem.mouseX = e.clientX;
oElem.mouseY = e.clientY;

oElem.drag(oElem, x, y);
return false
},

// private method. Stop drag process.
_dragEnd : function()
{
var oElem = DragHandler._oElem;
var x = parseInt(oElem.style.left);
var y = parseInt(oElem.style.top);
oElem.dragEnd(oElem, x, y);
document.onmousemove = null;
document.onmouseup = null;
DragHandler._oElem = null;
}

}