Using the Resize and Drag extender built into the ASP.NET AJAX controls

The development for both desktop and mobile browsers has always been a difficult task, often an impossible one. To ease the process, we have prepared a couple of extenders, thus delivering to the developers unified methods to implement solutions for the mobile web platforms. In addition to the previously introduced TouchScrollExtender in Q3 2010, we present to you another member of the family.

The ResizeExtender is a small client-side only control that enables resize and drag functionality on an HTML element in all browsers regardless if they are desktop or mobile (except the browsers that lack the needed desktop or touch events - Mobile Opera and Mobile IE). It depends on Core.js and the built-in jQuery in RadControls for ASP.NET AJAX.

Since Q1 2008 the ResizeExtender automatically enables resizing and dragging in all browsers for the following controls: RadColorPicker, RadDock, RadEditor, RadSlider, RadSplitBar and RadWindow and as of Q1 2011, the control supports mobile browsers as well.

Initialization

In order to use the ResizeExtender separately, follow these steps:

1. Reference its external script libraries:
   <telerik:radscriptmanager runat="server" id="RadScriptManager1">

     <scripts>

       <asp:scriptreference name="Telerik.Web.UI.Common.Core.js" assembly="Telerik.Web.UI" />

       <asp:scriptreference name="Telerik.Web.UI.Common.jQuery.js" assembly="Telerik.Web.UI" />

       <asp:scriptreference name="Telerik.Web.UI.Common.jQueryPlugins.js" assembly="Telerik.Web.UI" />

       <asp:scriptreference name="Telerik.Web.UI.Common.Popup.PopupScripts.js" assembly="Telerik.Web.UI" />

     </scripts>

   </telerik:radscriptmanager>
2. Initialize a new instance of the ResizeExtender class, using the following arguments:
   var resizeExtender = new Telerik.Web.UI.ResizeExtender(jsOwner, element, handles, tableElement, document, moveCursorType, autoScrollEnabled, moveToMouseLocation);

Arguments

The arguments that the constructor of the ResizeExtender class accepts are:

jsOwner [Optional]
JavaScript object, which should [optionally] implement onResizeStart/onDragStart, onResizing/onDrag, onResizeEnd/onDragEnd methods. Use these methods to correct the location or size values before they are applied to the element, according to some constraints, if any. For example, a restriction zone for the move functionality or minimum/maximum size for the resize functionality. The methods should accept one argument – an object that holds the new values for the location and(or) size of the element. Change the width, height, x and y properties of the object according to your requirements, if any.

elementToMoveAndResize
The HTML element for which you want to enable move and resize

handles [hash table]
A hash table with the HTML elements (the handles) that the user uses to resize and move the specified elementToMoveAndResize element.

tableElement[Optional]
The inner TABLE element of the specified elementToMoveAndResize element, if any.

document[Optional]
The document, to which the specified elementToMoveAndResize element belongs. In case this parameter is not specified, the extender uses the current document.

moveCursorType[Optional]
The CSS cursor style, applied to the move handle. By default, the extender uses “move” cursor type.

autoScrollEnabled[Optional]
A Boolean property that specifies whether the extender will change the scrollTop and(or) ScrollLeft of the browser window, when the user tries to move the specified elementToMoveAndResize element outside of the visible viewport. Note that this feature does not work in Mobile browsers.

moveToMouseLocation[Optional]
A Boolean property that specifies whether the element will move to the click location, before the user starts dragging it. This is useful, in case the move handle is larger than the element to move. A simple example that demonstrates this case is the handle element in the HSB/HSV palettes of RadColorPicker.

Click here to download an example demonstrating how to drag and resize a DIV element. To run the example, add the .aspx page to a Telerik RadControls for ASP.NET AJAX project.