Home arrow JavaScript arrow 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
(Page 1 of 5 )

A downloadable file for this article is available here.

With the progressive introduction of different methodologies for building web-based applications, the Web has become by far the largest development platform available today. Although the line drawn between client-side and server-side technologies delineates two broad categories within the large amount of tools for creating http-based applications, sometimes –- at least for the end user -- this line seems to vanish smoothly, due to the constant evolution in the development of user interfaces.

As I mentioned before, creating sophisticated user interfaces that emulate those ones found in desktop applications is undeniably a hot topic for many web designers, and seems to be a growing trend aimed at impacting deeply the way that websites interact with users. Since I consider myself as a humble contributor on the topic of designing web interfaces, in this series I’ll attempt to add my two cents by providing a plain English description of how to build “drag-and-drop” DIVs, which can be used as a starting point for creating more sophisticated, desktop-like user interfaces.

In the simplest sense, drag-and-drop DIV elements can be utilized as a good replacement for conventional pop-up windows, without having to deal with their intrinsic annoyances or with the possibility of being refused by pop-up blocking software. As you’ll see in short, the major drawbacks of “dragging” DIV boxes reside in their rather complex implementation in JavaScript, in addition to some conflictive accessibility issues. Considering that, if you’re thinking of including these sorts of elements on your website, you should first carefully evaluate their pros and cons, in order to avoid further hassles.

Before I dive into writing any JavaScript code for setting up “dragging” DIVs, let me first explain the things that I plan to develop over this series. First, I’ll go through the makings of a simple script that will show you the underlying logic for setting up “drag-and-drop” elements. Second, I’ll develop a more robust application, by using the foundations of a third-party JavaScript library, and finally end up creating some “drag-and-drop” DIVs that will look and feel like conventional windows.

Having established the goals of this tutorial series, it’s time to move on and find out how “drag-and-drop” DIVs can be created and included on web pages. Let’s go!

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