The today’s tutorial will try to explain how to make an element draggable or resizable – or even both in the same time, using the MooTools framework.
To accomplish this we’ll make use of two functions existent in MooTools: makeDraggable() and makeResizable().
This is very simple. We select the element we want to be resizable or draggable and use one of those functions:
A good idea would be to set in CSS of the elements
as those functions assume that elements are positioned absolute and may break your layout. But this depends on the layout you have.
Doing so, a drag of the element will drag it or resize it.
There are some parameters we can use for this functions.
One of this is ‘handle‘. Handle passed to the function will tell what other element is used to manage the drag or the resize of the main element.so something like :
will have the effect we obtain in demo page for the orange div.
What you have to pay attention on is that handle is an selected element so we need to use $(‘id_of_handler’).
In the next tutorial we will try to use all the knowledge we learned until now – select and create elements, add events and make draggable or resizable to create a window-like element than can be resized or moved around our page.