Working with Draggable Elements and Transparent Handles with the Ext JS Library

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.

Introduction 

Among the dynamic modules that comprise the Ext JS framework, there’s one that might be particularly interesting to you. It presents an easy learning curve and can be used for extending the behavior of server-side applications. In this case, I’m talking about its “Resizable” class, which is useful for building containers that can be dynamically resized and dragged across a web document. 

In the two previous episodes of this series, I explained how to create this kind of container, and also discussed in detail how to customize the look of the handles displayed around these web page elements. Indeed, the Ext JS library offers a decent level of customization when it comes to defining the visual aspect of resizing handles; it’s possible to display then in a pinned fashion, and even make them completely transparent. 

And now that I spoke about creating transparent resizing handles, in this last installment I’m going to discuss how to create these elements around resizable containers, and how to turn them into fully-draggable web page elements. 

Having already outlined the goals of this tutorial of the series, it’s time to learn to master the aforementioned features offered by the Ext JS framework. Let’s continue this educational journey right now! 

{mospagebreak title=Review: working with pinned handles and preserved ratios} 

Before I start out discussing how to build draggable containers and adding transparent handles to them, it would be helpful to recall a couple of hands-on examples developed in the previous tutorial. The first one was focused on demonstrating how to use the Ext JS library to display pinned handles around a targeted div, and the second one simply illustrated how to preserve the width/height ratio of the div in question as it was being resized. 

That being said, here are the two practical examples mentioned above: 

(example on building a resizable div with pinned handles)

 

<!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 container with pinned handles</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,

dynamic: true,

width: 350,

height: 150,

minWidth: 100,

minHeight: 50

});

});

</script>

</head>

<body>

<h1>Example on creating a resizable container with pinned handles</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>

 

 

(example on building a resizable div with preserved ratio)

 

<!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 container with pinned handles (preserved ratio)</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,

dynamic: true,

preserveRatio: true,

width: 350,

height: 150,

minWidth: 100,

minHeight: 50

});

});

</script>

</head>

<body>

<h1>Example on creating a resizable container (preserved ratio)</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>

 

As I said before, the first of the above code samples shows how to incorporate pinned handles into a simple resizable div, while the second one uses the “preserveRatio” argument that belongs to the already-referenced “Resizable” class to create a container whose width/height ratio is maintained as the element is being resized. 

Both cases demonstrate in a nutshell how easy it is to modify both the visual appearance and behavior of a given div, since this customization process is merely reduced to passing the proper incoming argument to the ”Resizable” class. Period. 

At this point, the two examples listed previously should be pretty familiar to you, so it’s time to continue exploring a few other features of the Ext JS library that pertain to building resizable web page elements. 

As I anticipated in the introduction, Ext JS allows you to create resizable containers whose handles can be turned transparent as the element is being resized across the web page. Thus, in the next section, I’m going to show you how to achieve this process by using an additional input argument of the familiar “Resizable” class. 

To see how these resizing handles will be created, click on the link that appears below and read the next few lines. 

{mospagebreak title=Modifying the look and feel of resizable containers with transparent handles} 

In the previous section, you recalled how to create a couple of resizable divs by using the “Resizable” class that comes with the Ext JS framework. Now I’m going to show you how to create the same kind of container, but this time its handles won’t be displayed as the element is resized across the web page. 

Achieving this is really simple; it only requires passing yet another parameter to the “Resizable” class, in a manner similar to the examples developed earlier. In summary, the source code that constructs a resizable container whose handles are transparent looks like this:

 

<!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 container with transparent handles</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,

transparent: true,

dynamic: true,

preserveRatio: true,

width: 350,

height: 150,

minWidth: 100,

minHeight: 50

});

});

</script>

</head>

<body>

<h1>Example on creating a resizable container with transparent handles</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>

 

As I explained in the beginning of this section, adding transparent handles to a resizable container is only a matter of assigning a “true” value to the corresponding “transparent” incoming argument, and then the “Resizable” class takes care of everything else. 

In addition, if you have any possible doubts about how the previous code sample works, try it out with your own browser and you’ll see that the handles will become transparent elements. 

Having already explained how to build resizable containers whose handles aren’t displayed on screen, it’s time to explore yet another handy feature offered by Ext JS’s resizing module. In this case, I’m going to show you how to convert a resizable div into a fully-draggable web page element. This behavior can be fairly useful when developing desktop-like web-based user interfaces. 

The full details of this topic will be covered in the section to come. Thus, go ahead and read it. It’s only one click away. 

{mospagebreak title=Creating draggable containers in a simple fashion} 

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!

[gp-comments width="770" linklove="off" ]
antalya escort bayan antalya escort bayan