Home arrow JavaScript arrow Page 2 - Building `Drag-and-Drop` DIVs: An Advanced Approach

Building `Drag-and-Drop` DIVs: An Advanced Approach

This is it, the article you were waiting for! Welcome to the second tutorial of the series “Building drag-and-drop DIVs.” In three parts, this series teaches you how to create realistic dragging DIVs, in order to boost the capabilities of web-based user interfaces, by introducing the “drag-and-drop” features found in many popular desktop applications.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 13
December 14, 2005
  1. · Building `Drag-and-Drop` DIVs: An Advanced Approach
  2. · Creating cross-browser “dragging” DIVs: coding a simple script
  3. · Getting the dragging script completed: adding some CSS rules and (X)HTML markup
  4. · Going one step further: setting up multiple dragging DIVs

print this article

Building `Drag-and-Drop` DIVs: An Advanced Approach - Creating cross-browser “dragging” DIVs: coding a simple script
(Page 2 of 4 )

Before I go into the details of writing a sample script for building dragging DIVs, I’ll briefly explain the basic requirements for successfully using the X library in creating “drag-and-drop” page elements, so you can have a clear idea of how to include this effect in your web documents.

In simple terms, I’ll need to include three source files from the corresponding library, called “x_core.js”, “x_event.js”, and “x_drag.js” respectively, which take care of defining all the powerful cross-browser functions that comprise the core of the library. They also handle JavaScript events and implement dragging effects on selected web page elements. In case you want to download the complete library’s source files and learn more about copyrights, license, documentation and so forth, visit http://www.cross-browser.com, in order to obtain the relevant information that may be of interest to you.

Having at our disposal the required JavaScript source files mentioned before, writing a sample script that implements a cross-browser “drag-and-drop” effect on a single DIV element can be reduced to including the corresponding source files of the X library and defining some simple JavaScript functions, which are attached to the pertinent DIV element. That said, here’s the first example of code for including a dragging DIV box on a web document:

<script type="text/javascript" src="path-to-library/x_core.js"></script>
<script type="text/javascript" src="path-to-library/x_event.js"></script>
<script type="text/javascript" src="path-to-library/x_drag.js"></script>
<script type="text/javascript">
// create 'div1' element and asssign events
function initDiv(){
 var div1=xGetElementById('div1');
// initialize properties for 'div1' element
function divOnDragStart(obj){
// move 'div1' element
function divOnDrag(obj,mdx,mdy){

As shown above, creating a “drag-and-drop” DIV element is really a straightforward task. But in fact I’m getting ahead of myself, so let’s first break up the code in pieces and understand what each section does. First, the scripts begin by including the three required source files, involved in the process of creating the dragging DIV. The lines below do exactly that:

<script type="text/javascript" src="path-to-library/x_core.js"></script>
<script type="text/javascript" src="path-to-library/x_event.js"></script>
<script type="text/javascript" src="path-to-library/x_drag.js"></script>

After the corresponding files have been downloaded, the “initDiv()”function is appropriately defined, in order to get the DIV element to which the dragging effect will be applied (in this example, the element is stored in the “div1” variable). Then, the DIV is positioned on the web page at the 50px X 50px top-left coordinates by using the “xMoveTo()” function, and the dragging process is activated by the “xEnableDrag()” function.

As you can see, this function accepts the name of the DIV element for being dragged, in conjunction with the callback functions, invoked at the different stages of the whole dragging process. Considering this, the “divOnstartDrag()” function is tied to the beginning of the dragging effect, while the “divOnDrag()” function is called up as long as the DIV element is dragged around. Also, it’s possible to define another callback function for being called when the element has stopped dragging, as shown below:

// define divOnDragStop function
function divOnDragStop(){
  alert('Total X offset:'+obj.offsetX+' Total Y offset:'+obj.offsetY);

In this case, I’ve defined the “divOnDragStop()” function, which would display the X - Y offset coordinates each time the mouse is released up from the selected DIV element. You can easily change this condition and instruct the function to do something more useful.

Now, by returning to the script flow, the “initDiv()” function concludes its operation by displaying the corresponding DIV attached to it, through the “xShow()” function, in this way completing the overall initializing process for the element in question.

With reference to the remaining script functions, they are very easy to follow. The first one, “divOnDragStart()” will be called when the dragging process is started and assigns two custom properties, “offsetX” and “offsetY” respectively, to the dragging DIV element, so they can be displayed at the end of the dragging operation. However, this is only a crude example, thus you may want to define this function in order to perform a different task.

Finally, the second function, “divOnDrag()”, is responsible for updating the position of the DIV element, according to the respective values of the mouse X-Y coordinates.

As you can appreciate, the complexities involved in simulating a “drag-and-drop” element are nicely handled for us behind the scenes by the X library, so by defining a few basic functions it’s possible to achieve a very realistic dragging effect on a web page.

Having demonstrated how you can create a simple dragging DIV for quick inclusion in web documents, the next part of this tutorial will consist of adding some CSS rules and a basic (X)HTML markup to the previous example, so you can see how the complete dragging script looks. Therefore, click the link and keep reading.

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