in my page having some control(Images) in left side..when i drag any control the copy of control adding into right side <Div> tag..like controls dragging from toolbox.. this is my forst step
2-->After adding the controls into <div> tag ..select any control i need to display selection handlers and move this control around the <Div> Location..
selection Handler means when u select any control at design time it display handlers around the control like this..i want to my controls..
*********************************
This is my code
***********************************
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default6.aspx.vb" Inherits="Default6" %>
<!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" xml:lang="en">
<head>
<title>Drag and drop in website using javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="drag.js" ></script>
<%-- <script src="WF_line.js"></script>--%>
</head>
<script type="text/javascript">
var img1uniqueNumber = 0;
var img2uniqueNumber = 0;
var img3uniqueNumber = 0;
function DragImg(obj)
{
//passing seleted Image Id.
var square = DragHandler.attach(document.getElementById(obj));
square.dragBegin = begin;
square.drag = drag;
square.dragEnd = end;
}
function show(obj)
{
if(obj == 'div1')
{
img1uniqueNumber++;
var img = document.createElement("img");
img.setAttribute('src', "FileIcons/computer-icon.jpg");
img.setAttribute('height', 50);
img.setAttribute('width',50);
img.setAttribute("id", "computer" + img1uniqueNumber);
var snapStatusDiv = document.getElementById("dZone");
snapStatusDiv.appendChild(img);
img.onmouseenter=function() {DragImg("computer"+img1uniqueNumber);};
var theImage = document.getElementById("computer" + img1uniqueNumber);
theImage.style.position = "absolute";
theImage.style.left = "50px";
theImage.style.top = "50px";
theImage.style.cursor="move";
}
if(obj == 'div2')
{
img2uniqueNumber++;
var img = document.createElement("img");
img.setAttribute('src', "FileIcons/folder-apple-with-file-icon.jpg");
img.setAttribute('height', 50);
img.setAttribute('width',50);
img.setAttribute("id", "File" + img2uniqueNumber);
var snapStatusDiv = document.getElementById("dZone");
snapStatusDiv.appendChild(img);
img.onmouseenter=function() {DragImg("File"+img2uniqueNumber);};
var theImage = document.getElementById("File" + img2uniqueNumber);
theImage.style.position = "absolute";
theImage.style.left = "50px";
theImage.style.top = "50px";
theImage.style.cursor="move";
}
if(obj == 'div3')
{
img3uniqueNumber++;
var img = document.createElement("img");
img.setAttribute('src', "FileIcons/folder-B4-6-icon.jpg");
img.setAttribute('height', 50);
img.setAttribute('width',50);
img.setAttribute("id", "folder" + img3uniqueNumber);
var snapStatusDiv = document.getElementById("dZone");
snapStatusDiv.appendChild(img);
img.onmouseenter=function() {DragImg("folder"+img3uniqueNumber);};
var theImage = document.getElementById("folder" + img3uniqueNumber);
theImage.style.position = "absolute";
theImage.style.left = "50px";
theImage.style.top ="50px";
theImage.style.cursor="move";
//var a=70,b=100,c=70,d=200;
//var linecanvas_graphics = new Graphics('dZone');
//var x1 = parseInt(a);
//var y1 = parseInt(b);
//var x2 = parseInt(c);
//var y2 = parseInt(d);
//linecanvas_graphics.drawLine(x1, y1, x2, y2);
//linecanvas_graphics.paint();
//var a=200,b=200,c=70,d=200;
//var linecanvas_graphics = new Graphics('dZone');
//var x1 = parseInt(a);
//var y1 = parseInt(b);
//var x2 = parseInt(c);
//var y2 = parseInt(d);
//linecanvas_graphics.drawLine(x1,y1,x2,y2);
//linecanvas_graphics.paint();
}
}
</script>
<body>
<form id="form1" runat="server">
<div id="div1" style=" border:1px solid blue; background-color:White; width: 48px; text-align:center; position:absolute; left:24px; top: 16px;"
onmousedown="show('div1');">
<img src="FileIcons/computer-icon.jpg" />
</div>
<div id="div2" style=" border:1px solid blue; background-color:White; width: 48px; text-align:center; position:absolute; left:24px; top: 80px;"
onmousedown="show('div2');">
<img src="FileIcons/folder-apple-with-file-icon.jpg" />
</div>
<div id="div3" style=" border:1px solid blue; background-color:White; width: 48px; text-align:center; position:absolute; left:24px; top: 144px;"
onclick="show('div3');">
<img src="FileIcons/folder-B4-6-icon.jpg"/>
</div>
<div id="dZone" style="position:absolute;top:16px; left:104px; width:768px; overflow:auto; height:392px; border: 1px solid #ff9900 ; background-color:White">
</div>
<br />
<br />
<br />
<%--<div id="Div4" style="position:absolute;top:224px; left:24px; width:3px; overflow:auto; height:3px; border: 1px solid #ff9900 ; background-color:White">
</div>--%>
<%-- <input type="button" value="drawline" onclick="javascript:drawCanvas()" style="left: 0px; position: relative; top: 240px"/>--%>
</form>
</body>
</html>
*************************************************
This is my javascript code for moving the control (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;
}
}
please help