dilip kumar

check my code...how drag the controls like our toolbox control dragging

Jan 10 2009 1:12 AM

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 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

System.ArgumentException: Input string was not in a correct format.

Where should I store users' uploaded images?-Folder in FTP or somewhere else

dilip kumar

check my code...how drag the controls like our toolbox control dragging

Answers (0)