Home arrow JavaScript arrow Page 3 - 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 - Dragging DIV elements: defining the “startDrag()” function
(Page 3 of 5 )

Since I previously attached the “startDrag()” function to the “onmousedown” event handler, which was tied to the document object, I’ll define the signature for this function, so you can understand how it works. Its source code is as follows:

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

As listed above, the “startDrag()” function takes an event object as the only incoming parameter, and then performs a simple checking process, in order to resolve the incompatibilities between Internet Explorer and the other browsers for obtaining the event fired by the corresponding DIV element. The verifying line shown below implements a cross-browser approximation for determining which event was triggered:

// determine event object
if(!e){var e=window.event};

In a similar way, the function next determines, in a cross-browser fashion, the source element that fired up the “mousedown” event, as follows:

// determine target element
var targ=e.target?e.target:e.srcElement;

After the event object and the source DIV element have been appropriately tracked, the function carries out two crucial operations: first it checks whether the DIV class name is “draggable,” and then it calculates the X,Y coordinates at which the mouse was clicked on, along with the top and left position of the DIV box. The first checking process obeys a simple reason: I don’t want all the DIVs included on the web page to be dragged by the user. The script should target only those that have a “draggable” class name, therefore if the selected element doesn’t have such a CSS class, the function simply does nothing.

Now, returning to the function flow, the calculations for assigning the new X,Y coordinates to the selected DIV element each time the user left-clicks on it, are very important in order to achieve a decent “dragging” effect.

As you can see, the logic of the function is quite simple to understand. However, there’s one thing worth noting: notice how I use a flag variable (drag) in order to indicate that the corresponding DIV box is currently being dragged. The last task the function performs is to tie the “onmousemove” event handler to the document object and trigger the “dragDiv()” function, so the DIV element can be properly moved around the web page.

Now that you know how the “startDrag()” functions does its business, it’s time to have a look at the “dragDiv()” function, which, as you’ll see in a moment, is responsible for moving DIV boxes around. So, let’s move on and see how this function is appropriately defined.


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