Home arrow JavaScript arrow Page 4 - 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 - Moving DIVs around the web document: defining the “dragDiv()” function
(Page 4 of 5 )

Having explained how the “startDrag()” function calculates the X,Y coordinates for moving a DIV element, I’ll first show how the “dragDiv()” function looks, and next explain what it does. Here’s the source code for this function:

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

Here, the function actually performs a extremely simple task. As illustrated above, as long as the user moves the mouse over the selected DIV, its coordinates are continuously updated by the following lines:

targ.style.left=coordX+e.clientX-offsetX+'px';
targ.style.top=coordY+e.clientY-offsetY+'px';

However, it seems that I’ve skipped over the first statements of the function. In fact, I haven’t. The line below:

if(!drag){return};

checks to see if the “drag” flag variable is either true or false. The first case means the user has started dragging the mouse on the DIV element, while the second one means the user has stopped dragging on it. As you may have realized, this flag variable provides us with a very convenient and simple method for determining when to update the top-left coordinates of the corresponding DIV, in response to the mouse event triggered by the user.

Finally, the lines of code responsible for getting the triggered event, as well as the source DIV element, really look redundant. Well, there is a valid justification for doing this. Internet Explorer is sometimes pretty slow for tracking some mouse events, particularly if they’re triggered over and over again at short time intervals. By including these lines, I make sure that most browsers will properly track the fired event, and determine correctly the corresponding source element.

After having defined the logic for both the “startDrag()” and “dragDiv()” functions, I’m pretty sure you’ve guessed how the “stopDrag()” function works. Haven’t you yet? All right, let me give you a clue. Since this function is called up for a “mouseup” event, all it has to do is set the “drag” flag to false, in this way indicating that the user has released the mouse’ s left button. Considering this, here’s the signature for this function:

function stopDrag(){
 drag=false;
}

That’s it. If you feel inclined to code the function above as one-liner, go ahead. Here, for the sake of clarity I’ve used a multi-line definition.

Now that I’ve demonstrated how each JavaScript function does its thing to achieve a realistic “drag-and-drop” effect on DIVs, it’s time to put all the pieces together and assemble the complete DIV dragging script. Keep reading to see how each function fits into the complete JavaScript application.


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