A beginner’s mootools – create draggable and resizable elements

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:

$('id_of_the_element').makeDraggable();

or

$('id_of_the_element').makeResizable();

A good idea would be to set in CSS of the elements

position:relative

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 :

$('id_of_the_element').makeResizable({handle:$('id_of_handler')});

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.

6 thoughts on “A beginner’s mootools – create draggable and resizable elements”

  1. What do you mean ?
    You want to know the position as x, y after drag?, or want to know/set the position as CSS property ?

  2. Sorry, I want to update the position of in a cookie.
    I know how to make but I recovered in the position of variables DIV.

    I’m french, sorry for the fault.

  3. To get the coordinates of an object , you can use

    $(‘element_id’).getCoordinates()

    that returns an object with {width,height,left,top,right,bottom}, element_id being the id of the draggable you want to read the data.

    To set/read a cookie you will need to use cookie.js from mootools .

    I suppose you use version 1.11, but right now on mootools.net is just v1.2, so if you need documentation I can provide you a chm, made by somebody else.

  4. I’m having a problem with the draggable div.

    When adding a textarea to it, it is not possible to write in it unless you use the tab key. You cannot click on the textarea with your mouse.

    Any hints?

    Thanks

  5. In your case I think you will have to set a separate handler for the draggable div and not the div itself.
    Like a small icon or another div that emulates a titlebar.

Comments are closed.