Building `Drag-and-Drop` DIVs: Developing a Basic Script
(Page 1 of 5 )
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.
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!
Next: Setting up the basics: emulating drag-and-drop triggers >>
More JavaScript Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
