Home arrow JavaScript arrow Page 5 - Building `Drag-and-Drop` DIVs: Developing a Basic Script
JAVASCRIPT

Building `Drag-and-Drop` DIVs: Developing a Basic Script


Conventional pop-up windows in JavaScript applications may work for some things, but they can be annoying, and many people use pop-up blockers. There is an alternative: drag-and-drop DIV elements. In this article, Alejandro Gervasio gets you started with the basics.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 74
December 07, 2005
TABLE OF CONTENTS:
  1. · Building `Drag-and-Drop` DIVs: Developing a Basic Script
  2. · Setting up the basics: emulating drag-and-drop triggers
  3. · Dragging DIV elements: defining the “startDrag()” function
  4. · Moving DIVs around the web document: defining the “dragDiv()” function
  5. · Gluing the pieces together: defining the complete DIV dragging script

print this article
SEARCH DEVARTICLES

Building `Drag-and-Drop` DIVs: Developing a Basic Script - Gluing the pieces together: defining the complete DIV dragging script
(Page 5 of 5 )

As I mentioned earlier, here is the complete DIV dragging script, along with some sample “drag-and-drop” DIVs:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>BASIC DRAG-AND-DROP DIVS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
// start dragging
function startDrag(e){
 // determine event object
 if(!e){var e=window.event};
 // determine target element
 var targ=e.target?e.target:e.srcElement;
 if(targ.className!='draggable'){return};
 // calculate event X,Y coordinates
    offsetX=e.clientX;
    offsetY=e.clientY;
 // assign default values for top and left properties
 if(!targ.style.left){targ.style.left='0px'};
 if(!targ.style.top){targ.style.top='0px'};
 // calculate integer values for top and left properties
    coordX=parseInt(targ.style.left);
    coordY=parseInt(targ.style.top);
    drag=true;
 // move div element
    document.onmousemove=dragDiv;
}
// continue dragging
function dragDiv(e){
 if(!drag){return};
 if(!e){var e=window.event};
 var targ=e.target?e.target:e.srcElement;
 // move div element
   targ.style.left=coordX+e.clientX-offsetX+'px';
   targ.style.top=coordY+e.clientY-offsetY+'px';
   return false;
}
// stop dragging
function stopDrag(){
 drag=false;
}
window.onload=function(){
 document.onmousedown=startDrag;
 document.onmouseup=stopDrag;
}
</script>
<style type="text/css">
.draggable {
 position: relative;
 width: 250px;
 height: 200px;
 background-color: #ccc;
 border: 1px solid #000;
}
</style>
</head>
<body>
<div class="draggable">

 

    This is a dragging DIV element

</div>
<div class="draggable">

    This is a dragging DIV element

</div>
</body>
</html>

If you wish to use the above script and tweak its code, you can either copy it or download the sample file from here (which is also available at the beginning of this article). 

Bottom line

In this tutorial, I’ve provided you with a basic (yet functional) DIV dragging script, which can be easily included as part of your JavaScript applications. Of course, this is only a basic example, and it’s not intended to be used in production environments.

However, all isn’t lost. If you’re looking for a more robust and flexible method for building “drag-and-drop” DIVs, you’ll have to wait until the next article, where I’ll use a powerful, cross-browser library, in order to encapsulate most of the complexities involved in creating a DIV dragging JavaScript program. You won’t want to miss it!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials