mootools Resizable from left, not right

Question

The mootools function makeResizable allows you to specify a handle, which means I can set a handle to the left of the element I want to resize. But the drag operation only allows to pull from the right to the left, not left to right.

Is there a way I can modify the function to let me do so? I'd like to be able to use a handle on the left and right of my element.

Edit: Also, I have set a resizable for another element for vertical resizing. And the logic seems to be inversed. I have to scroll up to max the element smaller. Why would this be? Absolute position on the element is set to bottom:0; left:0; (inside a relative container)

Answer 1

good question! As far as I know handling both left and right is not possible directly using makeResizable. Btw, by trying to make some tricks using makeDraggable, you could set the element-to-be-resized and 2 draggers (1 left, 1 right) and by dragging each element you could set the left/width properties of the element-to-be-resized. i.e.

html:

<div id="resizable">
    <div class="fakeHandler" id="leftHandler">
    </div>
    <div class="fakeHandler" id="rightHandler">
    </div>
</div>

css:

#resizable{
    width:100px;
    height:100px;
    background:red;
    border:1px solid #787878;
    position:absolute;
    left:100px;
    bottom:100px;
}
.fakeHandler{
    height:100px;
    width:10px;
    position:absolute;
}
#leftHandler{
    left:0;
    cursor:e-resize;
}
#rightHandler{
    right:0;
    cursor:w-resize;
}

js: check this fiddle

This example is just a sketch that has to be improved . However I think it's a good starting point, or an idea ;)