Home arrow JavaScript arrow Page 4 - Working with Draggable Elements and Transparent Handles with the Ext JS Library

Creating draggable containers in a simple fashion - JavaScript

When it comes to building full-blown web-based interfaces, Ext JS is quite possibly one of the most powerful libraries available nowadays. It's equipped with an impressive set of JavaScript classes that allow you to create all sorts of clever things, ranging from simple yet professional message windows, to desktop-like data grids and shadowed drop-down menus. This third part of a three-part series covers just one of its features, which lets you give interesting abilities to containers.

TABLE OF CONTENTS:
  1. Working with Draggable Elements and Transparent Handles with the Ext JS Library
  2. Review: working with pinned handles and preserved ratios
  3. Modifying the look and feel of resizable containers
  4. Creating draggable containers in a simple fashion
By: Alejandro Gervasio
Rating: starstarstarstarstar / 5
April 06, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
 

A good epilogue for this third tutorial of the series would be showing how to use the "Resizable" JavaScript class that you saw in the prior section for building resizable containers that additionally can be dragged across web documents. 

In reality, this seemingly complex behavior can be implemented very easily thanks to the existence of an additional parameter of the Resizable class, called simply "draggable," which should be utilized as indicated by the following code sample:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on creating a resizable draggable container</title>

<link rel="stylesheet" type="text/css" href="ext-all.css" />

<link rel="stylesheet" type="text/css" href="examples.css" />

<style type="text/css">

body{

padding: 0;

margin: 0;

background: #eee;

}

h1{

font: bold 16pt Arial, Helvetica, sans-serif;

color: #000;

}

p{

font: 9pt Arial, Helvetica, sans-serif;

color: #000;

}

#resizable{

width: 350px;

padding: 10px;

background: #9cf;

}

</style>

<script type="text/javascript" src="ext-base.js"></script>

<script type="text/javascript" src="ext-all.js"></script>

<script type="text/javascript">

// build resizable container when web page is loaded

Ext.onReady(function(){

var resDiv= new Ext.Resizable('resizable', {

wrap: true,

pinned: true,

draggable: true,

dynamic: true,

width: 350,

height: 150,

minWidth: 100,

minHeight: 50

});

});

</script>

</head>

<body>

<h1>Example on creating a resizable, draggable container</h1>

<div id="resizable">

<p>These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container.</p>

</div>

</body>

</html>

 

Definitely, the above example isn't too hard to grasp, right? As I mentioned before, turning a resizable container into a fully-draggable web page element is a process that only requires assigning a value of "true" to a "draggable" input argument. That's all it takes. 

Hopefully, with this final code sample you should have a better understanding of how to customize the visual appearance and behavior of several containers via the resizing module that comes bundled with the Ext JS library. 

Naturally, as always you're free to tweak the source code of all of these examples, so you can quick start incorporating resizable containers into your own web sites. This process will be very straightforward, trust me. 

Final thoughts 

It's hard to believe, but we've come to the end of this three-part series. Hopefully, the experience has been pretty educational, since you learned how to build easily resizable containers with the EXT JS JavaScript library. Frankly speaking, EXT JS is a killer package when it comes to adding dynamic behavior to elements of a web document. So, if you're planning to include resizable divs in your next web site, then this library is worth a look.  

See you in the next web development tutorial!



 
 
>>> More JavaScript Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: