dilip kumar

dilip kumar

  • NA
  • 29
  • 0

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