Topic 5: Further jQuery

Having looked at the basics of jQuery, we can now look at some of the more specialised features. We will look at how we can achieve advanced user-interface effects such as drag-and-drop (which is surprisingly easy).

Drag and Drop

Drag and drop is actually quite easy to do with jQuery. It's not actually part of the core jQuery library itself, but instead part of the add-on jQuery UI (user interface) library, which needs to be downloaded separately (but is installed on Edward). We'll start with how to drag an element, and then consider how to drop it into another. Here is some example code to drag an element:










Hello

Test



]]>

This alone, i.e. the single line of code $("#div1").draggable();, is all that is needed to make an element draggable! However, we probably want to do something a little more interesting. Normally we will want something to happen when we are done dragging the element, for example, we might have a customisable social network in which the user is able to customise the layout of their profile. In this case, we would want to save the new position once the element has been dragged, using AJAX. So we need to specify a callback function to run once the dragging is stopped, and this is the stop function. Here is an example:










Hello

Test



]]>

This simple example simply sets the text inside div1 to stopped when we are finished with dragging the div. However we might want to make it a bit more exciting by reading the new top and left properties of the moved div. Knowing these would allow the new position to be saved server-side using AJAX.










Hello

Test



]]>

Note how we now supply two parameters to the stop() function (which will be filled in automatically by the jQuery system): ev (a standard JavaScript event object) and u (the user interface element we are dragging). We can query the second parameter, u, to obtain the element's position with u.offset.left and u.offset.top respectively, and then we could save that to the server with AJAX if we wanted.

Dropping an element

The other aspect of drag-and-drop is the ability to drop one element into another. To do this, we set an element to be droppable. On a simple level, this might look like this:










Test

Draggable element


Droppable element



]]>

This example simply makes div2 droppable, i.e. an element capable of receiving other elements. However, this is not a lot of use unless we specify what will happen to the element being dropped. This next example does that:










Test

Draggable element


Droppable element



]]>

This code hides the element that was dragged. To obtain the element, we use the second parameter to the drop function again (u) and then obtain its draggable property which gives us the draggable element. We then call the hide() function on the draggable element to hide it.

Other points to note about drag and drop

If we want to reference the element that is being dragged, or being dropped into, from the drag and drop handling functions (e.g. stop or drop), we can use $(this). As we have seen the meaning of $(this) depends on the context.
As well as the stop function for handling stopping dragging, there is also a drag function for handling the dragging itself and a start function for handling starting dragging. So we can do things such as change the colour of an element while dragging, for example.

Classes during drag-and-drop

An interesting point about jQuery UI drag-and-drop is that elements automatically get given specific CSS classes while they are being dragged, or when an element has had another dropped into it. For example, when an element is being dragged, it will be given the CSS class of ui-draggable-dragging. So the simplest way, in fact, to change the style of an element while it is being dragged is simply to set up an appropriate CSS style definition:

.ui-draggable-dragging { font-family: helvetica,arial,sans-serif; 
font-size: 300%; }

The result of this will be that the font of an element being dragged will be changed to helvetica/arial/sans-serif at 3x the normal size while it is being dragged.

This moves on to a general point about jQuery and CSS classes. You can dynamically add a CSS class to a jQuery element with the addClass() method, e.g.:

 $("#div1").addClass("important");

This will dynamically add the div with the ID of div1 to the important class. So if the CSS for the important class had a particular colour defined, for example, the colour of the div would change. (There is also a corresponding removeClass() to remove a class from an element)

Resizing

It is also easy to make an element resizable with jQuery. All you have to do is apply the resizable() method, e.g.:

$("#div2").resizable();

Note that, to make the resize icon appear at the bottom-right of the element, you need to include the standard jQuery UI CSS file included with the distribution, e.g:

]]>

Once again you can read information about the element once you are done with resizing, so that you can, for example, save its new size to a server. This is done by specifying the stop function, e.g:

Specifically, the u.size.width and u.size.height properties will give you the new width and height.

Dialogs

With jQuery UI you can also easily create dialog boxes. Here is how to create a simple dialog box:








Dialog Test
Welcome to the dialog test page.
This is a dialog!


]]>

As can be seen, it is fairly straightforward to set up a dialog box: you simply call the dialog() method of a given page element and that will turn the page element into a dialog box. As long as the jQuery UI CSS stylesheet is linked in, this will be styled as a dialog box with a 'Close' button (X in top right corner).

Modal dialogs

Often we want our dialogs to be modal. This means that the rest of the page will be greyed out and the user will not be able to interact with the page until the dialog is dismissed. To make a dialog modal, simply pass in the modal option and set it to true:

$('#dialog1').dialog( { modal: true } );

Adding buttons to a dialog

Often dialogs will have buttons such as OK (to confirm the action) or Cancel to cancel the action). These are relatively easy to do:








Dialog Test
Welcome to the dialog test page.
Confirm signup?


]]>

Note how we specify the buttons on the dialog with the buttons option. This is a collection of the text for each button and the function which handles clicking on the button, so that this example will create two buttons 'OK' and 'Cancel', and when each is clicked, the functions okHandler() and cancelHandler() will be called, respectively.

Note in okHandler() how we close the dialog. We do this by passing the parameter 'close' to the dialog() method, so the syntax is:

$(element).dialog('close');

More information

See the documentation at jQueryUI for more details on everything you can do with jQuery UI.