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

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

Building `Drag-and-Drop` DIVs: Developing a Basic Script - Setting up the basics: emulating drag-and-drop triggers
(Page 2 of 5 )

In most cases, drag-and-drop triggering effects can be achieved by a combination of simple events, which when fired up in the appropriate sequence, emulate a real dragging behavior on the elements of a web document. Outlined through a simple step-by-step format, the overall process for simulating a drag-and-drop effect can be described by the steps below:

  1. The user left-clicks on the selected element (the event is trapped by an “onclick” event handler).
  2. The user moves the mouse over the element (the event is trapped by an “onmousemove” event handler).
  3. The user releases the mouse button on the selected element (the event is handled by the “onmouseup” event handler).

As you can see, a basic dragging effect on most web page elements involves handling programmatically the three events listed above in the correct sequence, which simply means that whenever a “click” event is triggered by the source element, mouse movements must be tracked on and the corresponding X,Y coordinates should be assigned to the pertinent element. Finally, the dragging process should be terminated when the mouse’s left button is released.

Even when the sequence described above is fairly easy to outline, it’s not always simple to translate into raw JavaScript code. So, let’s stay away from the underlying theory for a while, and define the appropriate event handlers that control the whole dragging process. In its simplest incarnation, drag-and-drop elements can be created with the following piece of JavaScript code:


As shown above, the dragging process is achieved by assigning respectively the “onmousedown” and “onmouseup” event handlers to the document object, and firing up a specific function in accordance with the event triggered. In this case, to be illustrative enough, I’ve assigned the “startDrag()” function to the first event, while the “stopDrag()” function has been attached to the second event. At this point probably you’re asking yourself…where has the “onmousemove” handler been implemented? Well, if you reread the sequence of steps that I described right at the beginning of this section, then you’ll realize that this handler is encapsulated within the “startDrag()” function, which hopefully will result in a quite realistic dragging effect on the page element that originally triggered the “mousedown” event.

Now, using highly generic code, I’ve explained how a drag-and-drop effect can be simulated on selected elements. Assuming that you’ve grasped the script’s driving logic, what I’ll do next is show you the definition of both “startDrag()” and “stopDrag()” functions, which will be attached to DIV elements. Join me into the next explanation to figure out how this is done.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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