Home arrow JavaScript arrow Page 3 - 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 - Getting the dragging script completed: adding some CSS rules and (X)HTML markup
(Page 3 of 4 )

As I said before, in order to see how the full dragging script works, here is its complete definition, including some basic CSS declarations, together with the corresponding (X)HTML markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DRAG-AND-DROP DIV EXAMPLE</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 functions
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;
}
// display x-y offset when dragging process is done
function divOnDragStop(obj){
  alert('Total X offset:'+obj.offsetX+' Total Y offset:'+obj.offsetY);
}
// turn DIV into 'dragging' element when page is loaded
window.onload=function(){
 // check if browser is DOM compatible
 if(document.createElement&&document.
getElementById&&document.getElementsByTagName){
  // initialize 'dragging' DIV elements
  initDiv();
 }
}
</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;
}
</style>
</head>
<body>
<div id="div1" class="winbody">
<div class="titlebar">Sample dragging Div element</div>
<div>
</body>
</html>

At this point, hopefully you have grasped the logic for creating dragging DIVs, which you can eventually use for building web-based interfaces that look very similar to desktop applications. Of course, as each approach relies on JavaScript for doing its business, you should carefully balance the pros and cons, and consequently decide the best strategy for meeting your particular needs.

At this stage, after having illustrated in a step-by-step format the process for using the powerful X library as the workhorse for building a single “drag-and-drop” DIV element, I’ll show you the last example of this tutorial, which uses multiple dragging DIVs on the same web page. Tired of reading? Don’t be. We’re almost done.


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