Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How we can Drag & Drop the objects on Web Form. (Image Drag & Drop)

Author: DevASP
Download Source Code : 582_ImageDrag.zip

This article is about how you can grad drop the objects on web form. In this application we will cut a picture into three parts and then we will join the parts of that picture in order to complete the..........

 

Steps you will do.

 

Start visual studio and create a new web application.

 

Include a new JavaScript file in the project and name it. Here in this application its name is “functions”. Write the following JavaScript functions in this JavaScript file.

 

 

function initClassdraggable()

{

            bMoving = false;

            document.onmousedown=startMove;

            document.onmousemove=moveObj;

            document.onmouseup=new Function("bMoving=false");

}

 

function moveObj()

{

            if(!bMoving) return true;

            if(event.button!=1) return true;

 

 

            ob.style.pixelLeft=event.clientX-xdif;

            ob.style.pixelTop=event.clientY-ydif;

            return false;

}

 

function startMove()

{

 

            if(event.srcElement.className!="draggable") return;

            bMoving=true;

            ob=event.srcElement;

            xdif=event.clientX-event.srcElement.style.pixelLeft;

            ydif=event.clientY-event.srcElement.style.pixelTop;

}

 

 

function cpClickState(obj)

{

            if(obj.cpType=="2")

            {

                        obj.cpType="1";

                        obj.src=obj.cpDn;                                 

            }

            else

            {

                        obj.cpType="2";

                        obj.src=obj.cpUp;

            }

}

 

function cpMouseOver(obj, f)

{

            obj.src=f;

}

 

function cpMouseOut(obj, f)

{

            obj.src=f;         

}

 

 

function cpPopup(ob2, x, y)

{

            ob2.style.posLeft=x;

            ob2.style.posTop=y;

            ob2.style.visibility="visible";       

}

 

 

function cpMousePopOver(ob1, f, ob2, x, y)

{

            cpMouseOver(ob1, f);

            cpPopup(ob2, x, y);       

}

 

 

function cpRollPopOver(ob1, f, ob2)

{

            cpMouseOver(ob1, f);

            ob2.style.visibility="visible";

}

 

 

function cpMousePopOut(ob1, f, ob2)

{

            cpMouseOut(ob1, f);

            ob2.style.visibility="hidden";                   

}

 

 

function cpPop(ob)

{

            if(ob.style.visibility=="visible") ob.style.visibility="hidden";

            else ob.style.visibility="visible";  

}

 

 

function cpRandom(min, max)

{

            var nRand = Math.random()*(max-min+1);

            return(Math.round(nRand + 0.5)+min-1);

}

 

 

 

Open the HTML design of your web page and add the following code to design the layout of your web page and call the functions contained in JavaScript file.

 

 

 

<html>

 

<head>

<title>draggable objects</title>

 

<link href="cplib.css" type=text/css rel=stylesheet>

<script language=javascript1.2 src="functions.js"></script>

</head>

 

<body>

<script language=javascript1.2>initclassdraggable();</script>

 

 

<img class=draggable style="z-index: 105; left: 463px; position: absolute; top: 308px" hspace=0

src="part1.gif" align=baseline border=0 name=part1>

 

<img class=draggable style="z-index: 106; left: 378px; position: absolute; top: 159px" hspace=0

src="part2.gif" align=baseline border=0 name=part2>

 

<img class=draggable style="z-index: 108; left: 545px; position: absolute; top: 210px" hspace=0

src="part3.gif" align=baseline border=0 name=part3>

 

 

<center>

<h3>drag the parts and complete the picture<br><br>

<h3>dont forget to visit the www.devasp.com<br>

<a href="http://www.devasp.com">www.devasp.com</a>

</h3>

</center>

 

</body>

</html> 

Note! If you want to add your own images copy those images in the root directory of the project and change the name in HTML code.

 

Run you application and drag drop the parts of image to complete the picture.

 

 

 

 

 

 

Article Comments
its a cool articles. this helps me very much.
thanks:

Devasp

Posted on 8/19/2006 8:14:50 AM by Saifi

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Adding new row Using JavaScript.

Disclaimer - Privacy
© 2002-2017 DevASP.net