C# Tutorials and offshore development in India
    Tutorials   Resources   Forum   Reviews   Communities   Interview   Jobs   Projects   Training   Your Ad Here    
Silverlight Games | Mentor | Code Converter | Articles | Code Factory | Computer Jokes | Members | Peer Appraisal | IT Companies | Bookmarks | Polls | Revenue Sharing | Lobby | Gift Shop |


Prizes & Awards
My Profile



Active Members
TodayLast 7 Days more...






Resources » Code Snippets » Html »

DRAG-N-DROP Example using Javascript


Posted Date: 26 Jan 2008    Resource Type: Code Snippets    Category: Html
Author: gokulMember Level: Silver    
Rating: 1 out of 5Points: 10



This a simple example of drag n drop using javascript.


<!-- TWO STEPS TO INSTALL DRAG-N-DROP:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->



<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
N = (document.all) ? 0 : 1;
var ob;
function MD(e) {
if (N) {
ob = document.layers[e.target.name];
X=e.x;
Y=e.y;
return false;
}
else {
ob = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
}
}
function MM(e) {
if (ob) {
if (N) {
ob.moveTo((e.pageX-X), (e.pageY-Y));
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function MU() {
ob = null;
}

if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
// End -->
</script>
</HEAD>



<!-- STEP TWO: Copy this code into the BODY of your HTML document -->



<BODY>

<div id="s" style="position:absolute;left:50;top:300;">
<img src=~/img/cards/spades.gif name="s">
</div>

<div id="d" style="position:absolute;left:50;top:350;">
<img src=~/img/cards/diamonds.gif name="d">
</div>

<div id="c" style="position:absolute;left:100;top:300;">
<img src=~/img/cards/clubs.gif name="c">
</div>

<div id="h" style="position:absolute;left:100;top:350;">
<img src=~/img/cards/hearts.gif name="h">
</div>

Just click and hold the 4 suit images to the left and then you can move them around the page!

</body>
</html>



Responses

Author: Amaresh Chandra Das    29 May 2009Member Level: Bronze   Points : 0
owo.
good article!!!


Thanks,
-Amaresh


Feedbacks      
Popular Tags   What are tags ?   Search Tags  
Sign In to add tags.
Javascript  .  Drag and drop  .  

Post Feedback


This is a strictly moderated forum. Only approved messages will appear in the site. Please use 'Spell Check' in Google toolbar before you submit.
You must Sign In to post a response.
Next Resource: Marquee Tag of HTML
Previous Resource: Marquee Scrolling Vertically
Return to Discussion Resource Index
Post New Resource
Category: Html


Post resources and earn money!
 
More Resources



dotNet Slackers

About Us    Contact Us    Privacy Policy    Terms Of Use