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');
if(!div1){return};
xMoveTo(div1,50,50);
xEnableDrag(div1,divOnDragStart,divOnDrag,divOnDragStop);
xShow(div1);
}
// initialize properties for 'div1' element
function divOnDragStart(obj){
obj.offsetX=0;
obj.offsetY=0;
}
// move 'div1' element
function divOnDrag(obj,mdx,mdy){
xMoveTo(obj,xLeft(obj)+mdx,xTop(obj)+mdy);
obj.offsetX+=mdx;
obj.offsetY+=mdy;
}
</script>
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.
Next: Getting the dragging script completed: adding some CSS rules and (X)HTML markup >>
More JavaScript Articles
More By Alejandro Gervasio
