Resize Draggable div

[Sebastian Kurt]

Hi,
yesterday i build up some boxes(DIVs) an meke them draggable. It was
so easy an fast implemented, great choice to use script.aculo.us!
but now i tried to figure out if it ist poosible to resize a draggable
div with the mouse by clicking on the border an dragging with
keypressed to the new size. is it possible to do so on a not draggable-
element?

http://hoodrich.skurt.de/

thx, sebastian

[Colin Mollenhour]

It seems the simplest (nay, most oft used, perhaps it isn't the
simplest) solution is to create the border out of separate elements
altogether and observe those for mousedown, but I suppose you could do
some boundary checking on mousedown for the entire element and if the
mouse is a certain distance from the edges you could then create a
mousemove event which would track the mouse and do the resizing. You'd
have to figure out which edge was clicked, and then make sure you do the
resizing in the correct direction (i.e. the opposing edges wouldn't
move). Also, one disadvantage to this single-element method would be
that you couldn't simply set the CSS cursor property for the draggable
edges to cue the user that it is resizable, but you could observe
mousemove on the mouseover and change it dynamically... Sounds slow..
So if you are looking for a solution that is as simple as making the
element draggable was, the short answer is I don't think there is one
currently, but I'd love to see a class that adds this functionality in
the same style Draggable does, perhaps using the border-width property
to automatically set the bounds checking variables.. Anyone know why
this wouldn't work?

Colin

[Dave Crane]

Sebastian, Colin,

There's a floating window class built on top of Prototype here

http://prototype-window.xilinus.com/samples.html

That can be resized by drag and drop. I've only looked at this as a gormless
end user and thought "wow, that's really neat", so I can't comment on how
they've done it, but you might like to point Firebug at it and get a few
tips.

HTH

Dave

> --
> This email has been verified as Virus free
> Virus Protection and more available at http://www.plus.net

--
----------------------
Author
Ajax in Action http://manning.com/crane
Ajax in Practice http://manning.com/crane2
Prototype & Scriptaculous Quickly http://manning.com/crane3

[Colin Mollenhour]

Dave, I've read the code for this class extensively. In fact, I am in the process of rewriting it to improve speed, memory cleanup, standards compliance, event hooks, compactness, Prototypishness, etc.. It is a pretty hefty library, especially once you add the CSS, but it does look very nice indeed.  Looking at Sebastian's example I assumed he was looking for a lightweight solution. PWC uses a table layout for each window, which didn't play nicely when I tried to put a calendar inside it... I have to say it's not my favorite Prototype-based code.. I trolled the message board for a while and there seems to be a lot of people using it...and a lot of people having problems with it...

Looking at Prototype's Position methods I think my proposed solution of using edge-detection on a single div is feasible. It would be much nicer than the table-layout IMO. Of course there is always some crazy browser specific bug that'll make things more difficult than they should be.. Take for instance IE6/7s refusal to maintain the margins set on a position: relative div when said neighboring parent elements (table rows) would resize due to Ajax content insertion.. Man that was frustrating..

Colin

[Dave Crane]

On Thursday 15 February 2007 14:59, Colin Mollenhour wrote:
> Dave, I've read the code for this class extensively. In fact, I am in the
> process of rewriting it to improve speed, memory cleanup, standards
> compliance, event hooks, compactness, Prototypishness, etc.. It is a pretty
> hefty library, especially once you add the CSS, but it does look very nice
> indeed.  Looking at Sebastian's example I assumed he was looking for a
> lightweight solution. PWC uses a table layout for each window, which didn't
> play nicely when I tried to put a calendar inside it... I have to say it's
> not my favorite Prototype-based code.. I trolled the message board for a
> while and there seems to be a lot of people using it...and a lot of people
> having problems with it...

Fair enough, I haven't used it in anger.

> Looking at Prototype's Position methods I think my proposed solution of
> using edge-detection on a single div is feasible. It would be much nicer
> than the table-layout IMO. Of course there is always some crazy browser
> specific bug that'll make things more difficult than they should be.. Take
> for instance IE6/7s refusal to maintain the margins set on a position:
> relative div when said neighboring parent elements (table rows) would
> resize due to Ajax content insertion.. Man that was frustrating..

Looking at simpler solutions that don't add extra elements as handles around
the borders, Walter Zorn's library does something similar to this, except
that he triggers a resize rather than a move by holding the shift key down
while dragging. This gets round the edge detection issue, but requires the
user to learn a new UI convention - resizing when you're near the edge of the
element, moving when you drag in the middle, is by far the most obvious way
to go. Anyway, his stuff is at http://walterzorn.com , for the curious.

Your proposed solution sounds like it would be a tad fiddly to code (it
really ought to check for corners to resize height and width at once, while
we're at it), but the right way to do it in principle.

Maybe it should also detect if the user's running a Mac, in which case we
switch off all the handles except he bottom right corner :-)

Dave

-------------------------------------------------------

[Colin Mollenhour]

Proof of concept:
http://colin.mollenhour.com/xobetil.html

It doesn't currently resize, but the edge detection is all there and
works quite well and was quite easy to code actually. I don't notice any
lag when mousing over it either so I think it's pretty quick. I need to
think of a better name for it though..
For anyone wondering what this is, it is the beginnings of a widget that
gives you a resizable and draggable "window" with a *single* div element.

I tested it in IE6/7, FF2 and Opera 9.10. Something isn't working right
in Opera, perhaps element.clientWidth/Height? I don't have time to look
into it now but I'm sure it could be fixed.
Does it work in Safari?

Colin

[Thomas Fuchs]

Yes, works in Safari.

Am 16.02.2007 um 04:35 schrieb Colin Mollenhour:

>
> Proof of concept:
> http://colin.mollenhour.com/xobetil.html
>

[Christophe Porteneuve]

Hey Colin,

Colin Mollenhour a écrit :

> It doesn't currently resize, but the edge detection is all there and
> works quite well and was quite easy to code actually. I don't notice any
> lag when mousing over it either so I think it's pretty quick. I need to
> think of a better name for it though..
> For anyone wondering what this is, it is the beginnings of a widget that
> gives you a resizable and draggable "window" with a *single* div element.
>
> I tested it in IE6/7, FF2 and Opera 9.10. Something isn't working right
> in Opera, perhaps element.clientWidth/Height? I don't have time to look
> into it now but I'm sure it could be fixed.

FWIW, I can't get it to work on my FF2/Linux: I do get edge detection
and proper mouse cursors, but when I drag borders, I don't get resizing:
just dragging. However carefully I do it.

--
Christophe Porteneuve a.k.a. TDD
"[They] did not know it was impossible, so they did it." --Mark Twain
Email: t...@tddsworld.com

[John]

Works in Firefox 1.0.6 for Linux too. (In know, it's time to upgrade.)

[John]

I spoke too soon. In Firefox 1.0.6 the dragging works, but the resizing doesn't.

[Thomas Fuchs]

Reading is overrated! ;)

Am 16.02.2007 um 08:56 schrieb Christophe Porteneuve:

>
> Hey Colin,
>
> Colin Mollenhour a écrit :
>> It doesn't currently resize, but the edge detection is all there and
>

[Colin Mollenhour]

Haha! Exactly, if you miss something, someone else will point it out for
you anyway. ;)

Is anyone interested in continued development of this? I don't need it
at the moment, I just made this for the heck of it to see how well it
would work and how easy it'd be.
I think there are enough full-blown window classes out there, I might
develop it as a "Resizable" feature that can be applied to elements in
the same way Draggable can be.

Do you think this could potentially be useful? It might be made to work
with textareas, imgs, etc..

So for example you could create a window class like so (skeleton):
var SimpleWindow = Class.create();
SimpleWindow.prototype = {
initialize: function(element){
this.element = $(element);
this.draggable = new Draggable(this.element);
this.resizable = new Resizable(this.element);
}
};

Or a resizable textarea:
var myResizableTextarea = new
Resizable(Builder.node('textarea',{name:'text'}));

Thoughts?

Thanks,
Colin

[Michael Peters]

Colin Mollenhour wrote:

> Is anyone interested in continued development of this?

Are you asking if we want you to continue to work on it? Or if one of us would
be willing to take it over?

Yes on the first count, and maybe on the 2nd.

--
Michael Peters
Developer
Plus Three, LP

[Colin Mollenhour]

I was really asking the former, but if someone wanted to work on it with me that would be great.  The reason I was asking is I really don't have a use for this myself at the moment (unless it was to replace PWC) so I'm somewhat lacking the motivation to finish it.

Thanks,
Colin

[Frederik Eychenié]

Hi, i'm new here, and it's my first visit. (and i'm french, and we all
now that we can feel sorry for their english).
I was wondering if someone had already worked on prototype draggable &
resizable combination before starting developping it myself, and i
found you. So if you're still interested in some help ...
(i really NEED this functionality, and have no lack of motivation even
if i'm not really a JS wizzard)

I was thinking of adding an optionnal parameter to the Draggable
class, like Resizable : true, maxHeight :200px, maxWidth : 200px or
something like that, but after some thoughts Colin's SimpleWindow
class suggestion seems to be easier to implement, and better for
setting up more otions later..

I have already tried some tricks with a resize handler in the bottom
right of a draggable container(dragged by a handler too) and it seemed
to work. (tested only under IE 6 an FF2) .

Thanks,
Fred

On 16 fév, 16:33, Colin Mollenhour <eliteii...@mollenhour.com> wrote:
> I was really asking the former, but if someone wanted to work on it with me that would be great. The reason I was asking is I really don't have a use for this myself at the moment (unless it was to replace PWC) so I'm somewhat lacking the motivation to finish it.
> Thanks,
> Colin

> Michael Peters wrote:Colin Mollenhour wrote:Is anyone interested in continued development of this?Are you asking if we want you to continue to work on it? Or if one of us would be willing to take it over? Yes on the first count, and maybe on the 2nd.

[Colin Mollenhour]

Hi Frederick, what kind of help do you want?  I really don't need this myself at the moment but do think it is a cool idea so I can help as time allows (maybe not much).

Colin

[Toby Parent]

Hey, all -

Trying to set up a menu with scriptaculous and prototype, working for
the most part. Two small things annoying the poo outta me, though:

1) I have a resize button for the menu (minimize/restore). I'd like to
have it toggle between two different CSS-styled background images, based
on the status of the menu (if it's displaying the nav links, use the
minimize style, otherwise, use the restore style).

2) I have submenu popouts, based on my menu. they were originally done
via CSS, and I'd prefer not to try to switch them, but they're doing an
odd thing - if I hide and reshow the menu via scriptaculous, the
submenus are cropped to the dimensions of the original menu box.

I'm trying to post this live for someone to view and debug, but for
now this is what I'm working with.

Thanks!
-Tobias Parent

[Toby Parent]

Sorry - not sure how I hijacked the thread, but I sure didn't mean to!
-Toby

[Toby Parent]

Finally got the page up, still haven't figured the image swapping thing
or the clipping thing. The page is up at:

http://www.arcelectricalinc.com/prototest.html

Thanks again!
-Toby

[Frederik Eychenié]

Hi again,
i wasn't really asking of help, i just wanted to know if some are
interested in collaborative work around this subject.
I've just finished a little starting thing, you can try it on
www.axiomes.org/resize/.
It detects if your pointer is on the bottom-right corner of the
draggable, then changes the cursor, and do resizing instead of
dragging.
I tested on FF2, and IE 6, and it seems to work.
I havn't tested with Draggable options, and at the moment, the only
Resizable option is 'tolerance', determining the size in px of the
"pointer on corner" detection zone.
Any comment and/or improvement is welcome !

Fred

On 26 mar, 19:52, Colin Mollenhour <eliteii...@mollenhour.com> wrote:
> Hi Frederick, what kind of help do you want? I really don't need this myself at the moment but do think it is a cool idea so I can help as time allows (maybe not much).
> Colin

> Frederik Eychenié wrote:Hi, i'm new here, and it's my first visit. (and i'm french, and we all now that we can feel sorry for their english). I was wondering if someone had already worked on prototype draggable &resizablecombination before starting developping it myself, and i found you. So if you're still interested in some help ... (i really NEED this functionality, and have no lack of motivation even if i'm not really a JS wizzard) I was thinking of adding an optionnal parameter to the Draggable class, likeResizable: true, maxHeight :200px, maxWidth : 200px or something like that, but after some thoughts Colin's SimpleWindow class suggestion seems to be easier to implement, and better for setting up more otions later.. I have already tried some tricks with a resize handler in the bottom right of a draggable container(dragged by a handler too) and it seemed to work. (tested only under IE 6 an FF2) . Thanks, Fred On 16 fév, 16:33, Colin Mollenhour<eliteii...@mollenhour.com>wrote:I was really asking the former, but if someone wanted to work on it with me that would be great. The reason I was asking is I really don't have a use for this myself at the moment (unless it was to replace PWC) so I'm somewhat lacking the motivation to finish it. Thanks, Colin Michael Peters wrote:Colin Mollenhour wrote:Is anyone interested in continued development of this?Are you asking if we want you to continue to work on it? Or if one of us would be willing to take it over? Yes on the first count, and maybe on the 2nd.

[Frederik Eychenié]

Hi Colin,

In fact, yes, i need a little help for the simple window class...
It would be great that someone having more knownledge as me in Js
could have a look on what i started to do (www.axiomes.org/resize/ ),
I am really not sure to have taken the right way to make something
lightweight when i see my CPU load.
Also under IE text is selected while resizing. I've tried to overide
the IE ondrag and onselect event handlers, but it changes nothing.. Do
you know anything about this ?
Thanks
Fred

On 26 mar, 19:52, Colin Mollenhour <eliteii...@mollenhour.com> wrote:

[Gareth Evans]

I'm not getting any text selected like you described on IE6 but I do get an error thrown on line 81 of invalid argument, when I am resizing a div and I drag the corner behind another div.

 

Gareth

 

[Colin Mollenhour]

I'll try to take a look at it sometime but no guarantees as to when.. I've never dealt with the text selection issue before, but are you using Event.stop when you determine that a resize is the desired action?

Colin

[Frederik Eychenié]

Hi all !

On 1 avr, 12:46, Colin Mollenhour <eliteii...@mollenhour.com> wrote:
> I'll try to take a look at it sometime but no guarantees as to when.. I've never dealt with the text selection issue before, but are you using Event.stop when you determine that a resize is the desired action?

Yes Colin you are right it is as simple as that! Event.stop(e) on
resize start fixes it.

Gareth, i tried to get the error you are talking about, but no way...
Could you please send me a screenshot and your "view source" render at
dreuff at free dot fr?

Thanks, Fred

[Gareth Evans]

Emailed as requested

[Frederik Eychenié]

Hi

On 1 avr, 22:45, "Gareth Evans" <agr...@gmail.com> wrote:
> Emailed as requested

I didn't get any email ... right adress?

I thought it could be nice to extend Draggable with the resize ability
by extending the Draggable class (without changing the
dragdrop.js),like :

Object.extend(Draggable.protoype , {
makeResizable :function(){
},
unmakeResizable : function(){
}
//and more needed methods
});

var a = new Draggable('my_div');
a.makeResizable();

Adding natively the resizable option to Draggable could be a goal
after having optimyzed and tested and tested again , like new
Draggable('my_div',{resizable:true});

What are you all thinking about all that, better make a new Resizable
class ? Or add the resizable ability to Draggable (whithout changing
the native dragdrop.js for the moment) ?
Or creating, as Colin suggested, a light weight window class with
methods and options like PWC, as an alternative to it? (really nice
class but a little bit heaaaaaavy for simpler purposes)
Every thought and idea about all that could be usefull, so come on !

Thanks for all,fred.

[Gareth Evans]

i did send it and it didnt bounce but no matter

it fails when i drag a corner over the top of the opposing corner

 

gareth

 

On 4/2/07, Frederik Eychenié <dreuff...@gmail.com> wrote:

[Frederik Eychenié]

Hi,

On 2 avr, 12:34, "Gareth Evans" <agr...@gmail.com> wrote:
> i did send it and it didnt bounce but no matter
> it fails when i drag a corner over the top of the opposing corner
>
> gareth
>

> On 4/2/07, Frederik Eychenié <dreuffmeis...@gmail.com> wrote:

Yeah in fact it was my IE6 (ver 6.0.2900.2810) that wasn't firing any
error, but on an other computer it did it.
I fixed the bug really quickly : once you passed the opposite corner,
it was trying to set negative height and width values !! Yeah
sometimes i miss such basical things...
Now you can set more options : minWidth, minHeight, max Width and
maxHeight.

Thanks.

[Gareth Evans]

Cool.

[reza....@gmail.com]

Hi Frederik,

I have been trying to use your resizeable.js code (thank you by the
way, it's exactly what i'm looking for!), but I think i've found a
bug. If you have a resizable, draggable element with a handle you
must click inside the element before using the handle to drag it.
This occurs onload as well as after resizing the element. I noticed
on your example page everything seems to work fine, but if you remove
all other elements and leave the "resizeable2" element, i think you
will be able to reproduce the bug. I am using ff2 and safari.

Thanks very much!

-Reza

p.s. am i allowed to use this code?

On Apr 1, 6:27 pm, "Frederik Eychenié" <dreuffmeis...@gmail.com>
wrote:

> Hi all !
>
> On 1 avr, 12:46, Colin Mollenhour <eliteii...@mollenhour.com> wrote:
>

> > I'll try to take a look at it sometime but no guarantees as to when.. I've never dealt with the text selection issue before, but are you using Event.stop when you determine that aresizeis the desired action?
>
> Yes Colin you are right it is as simple as that! Event.stop(e) onresizestart fixes it.

[Diodeus]

You may also want to look at some code I wrote last year. It has
resizeable draggables, and a few other features.

http://beta.moveable.com/jameslab/ajaxio

On May 9, 4:07 am, "reza.shi...@gmail.com" <reza.shi...@gmail.com>
wrote:

[tsc]

Hi Frederik,

your class fits perfetly for me. But I needed some more options so I
added these:
- added option: 'constraint'; values: false (default), 'horizontal',
'vertical'
- added option: 'change'; values: false (default), function
- added option: 'snap'; values: false, or [x,y] or function(x,y)
{ return [x,y] }
- added the keeping of the default cursor style after resizing
- added detection of resize cursor: (s-e/s/e -resize); depends also on
the option 'constraint'

You can find it here: http://www.tsc-web.net/dev/javascript/resizeable.html
It would be great if you are willing to put my changes into your
class.