Resizing from top or left border disabled by default

[dduugg]

It seems resizing an element is only enabled by default along the bottom and right borders. In other words, if the dotted lines in this image were element boundaries, the resize handles marked "X" would not work at all, and those marked "/" would only work along one dimension:

Is this behavior intentional, or am I doing something wrong? If the former, would you be amenable to a PR to enable resizing along all four borders?

[taye]

It is intentional and I don't think it would be a good idea to change it soon. The resize axis option string would need to be changed to something like a directions object with left, right, up and down and the resize event properties would need to be changed as well. I plan on changing it in the not-so-distant future but would like to add some other features before changing the API.

If you will have elements which are resize handles, you can make them draggable and resize the item that they surround in response to the drag events.

[gdcesare]

Hi taye! Could you give an example of what you said, a resizable item in response to the drag events of one of the item's handles. I couldn't get it… Thanks!

[taye]

Here's one I made in a hurry about a month ago: http://plnkr.co/edit/F9eey5rK2yDkBNuWq7TT?p=info

Most of the relevant code is in the slider.js file

A custom Resize handle box is needed as interact.js does not provide one.
Each handle is draggable and dragging updates the current resize parameters
in the application.

Here, window.Resize is exposed with methods to allow response to resizing and
to position the resize handles.

Resize has the following methods:

• set (dimensions) : Takes a dimensions object with x, y, width, height.
  This will be the new position and size of the box.
• draw () : Redraw the resize box.
• hide () : hide the resize box
• show () : show the resize box
• addListener (listener) : Takes a function to call when a resize happens.
  The function recieves a drag event and the new
  dimensions as arguments -
  function (event, dimensions) { ... }
• removeLisener (listener) : Removes a previously added listener

[gdcesare]

Than you!!! I will try!

[lewisdiamond]

+1 for this feature. In the meantime I'll implement it with multiple draggable nodes.

[diegope]

+1 for this as well!

[jacquescrocker]

+1, this blocked me from using interact.js (had to switch to jquery ui). My app requires a sidebar on the right side of the page. Resizing would only work from the left edge.

[taye]

As noted above the previous two comments, four-direction resizing is being implemented in PR #145. You can try it out now; I don't think the API will change much before it's ready to be merged. I'd appreciate any feedback.

[jacquescrocker]

will do, thanks @taye!