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

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Building `Drag-and-Drop` DIVs: An Advanced Approach - Going one step further: setting up multiple dragging DIVs
(Page 4 of 4 )

To extend the existing capabilities of the DIV dragging script that you saw earlier, I’ll simply set up a new example, which is capable of including several dragging DIVS on the same web page. Since the new script also uses the X library, you shouldn’t have any problems understanding how it works. Having said that, below is the complete source code for creating multiple dragging DIVs on the same web document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MULTIPLE DRAG-AND-DROP DIVS</title>
<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 assign events
function initDiv1(){
 var div1=xGetElementById('div1');
 if(!div1){return};
   xMoveTo(div1,50,50);
   xEnableDrag(div1,div1OnDragStart,div1OnDrag);
   xShow(div1);
}
// define 'div1OnDragStart()' function for 'div1' element
function div1OnDragStart(){}
// move 'div1' element
function div1OnDrag(obj,mdx,mdy){
   xMoveTo(obj,xLeft(obj)+mdx,xTop(obj)+mdy);
}
// create 'div2' element and assign events
function initDiv2(){
 var div2=xGetElementById('div2');
 if(!div2){return};
   xMoveTo(div2,250,250);
   xEnableDrag(div2,div2OnDragStart,div2OnDrag);
   xShow(div2);
}
// define 'div2OnDragStart()' function for 'div2' element
function div2OnDragStart(){}
// move 'div2' element
function div2OnDrag(obj,mdx,mdy){
   xMoveTo(obj,xLeft(obj)+mdx,xTop(obj)+mdy);
}
// create 'div3' element and assign events
function initDiv3(){
 var div3=xGetElementById('div3');
 if(!div3){return};
   xMoveTo(div3,450,50);
   xEnableDrag(div3,div3OnDragStart,div3OnDrag);
   xShow(div3);
}
// define 'div3OnDragStart()' function for 'div3' element
function div3OnDragStart(){}
// move 'div3' element
function div3OnDrag(obj,mdx,mdy){
   xMoveTo(obj,xLeft(obj)+mdx,xTop(obj)+mdy);
}
// turn DIVS into 'dragging' elements when page is loaded
window.onload=function(){
 // check if browser is DOM compatible
 if(document.createElement&&document.
getElementById&&document.getElementsByTagName){
  // initialize 'dragging' DIV elements
  initDiv1();
  initDiv2();
  initDiv3();
 }
}
</script>
<style type='text/css'>
.titlebar {
 height: 15px;
 background: #03c;
 font: bold 11px Arial, Helvetica, sans-serif;;
 color: #fff;
 margin: 0;
 padding: 1px;
   overflow: hidden;
}
.winbody {
 width: 200px;
 height: 180px;
   position: absolute;
 background: #eee;
 font: normal 11px Arial, Helvetica, sans-serif;
 color: #000;
 margin: 0;
   padding: 0;
   overflow: hidden;
 border: 1px solid #000;
 cursor: default;
}
p {
 margin: 10px;
}
</style>
</head>
<body>
<div id="div1" class="winbody">
<div class="titlebar">Sample Dragging Div1</div>
<div>
<p>This is an example of a dragging DIV element.</p>
</div>
</div>
<div id="div2" class="winbody">
<div class="titlebar">Sample Dragging Div2</div>
<div>
<p>This is an example of a dragging DIV element.</p>
</div>
</div>
<div id="div3" class="winbody">
<div class="titlebar">Sample Dragging Div3</div>
<div>
<p>This is an example of a dragging DIV element.</p>
</div>
</div>
</body>
</html>

As you can see from the script above, I’ve simply used the same source files of the X library, in order to create three different dragging DIVs, and define the corresponding JavaScript functions, which are responsible for turning these elements into “drag-and-drop” boxes. Closely similar to what I illustrated in the first example, each DIV is first initialized by the “initDiv1()”, “initDiv2()” and “initDiv3()” functions, and then the pertinent callback functions are tied to each of them, in order to implement the already familiar dragging effect.

With reference to the CSS declarations and (X)HTML markup, it remains nearly the same as the previous example, so I won’t waste your time explaining the boring details. Of course, the major change rests on including the three DIV elements that I mentioned before on the web page, so they can be dragged around the web document. Pretty good, right?

Bottom line

That’s all for now. Throughout this second tutorial, I’ve demonstrated how you can easily create dragging DIV elements by utilizing the X library developed by Michael Foster. Personally, I strongly recommend using this powerful package for building cross-browser DHTML scripts, due to its high quality and outstanding capabilities. Finally, I’d like to thank Michael Foster, for providing web developers with this remarkable set of JavaScript libraries.

That said, in the last installment of this series, I’ll go through the details of building dragging DIVs, which look and feel like real windows. As usual, see you in the next part!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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