Interact.js : Resize using a button

A few days ago i had to implement a resize functionality for one of my clients and i needed a library that was not dependent on jQuery since i had to implement it as a widget and i wanted to avoid any conflicts on host site  at all.

So during my research i came upon interact.js, a lightweight library that provides drag & drop and resizing for desktop as well as mobile devices. I looked at the demo and i was impressed, so i went ahead and implemented the resize functionality to the widget.

Below is a bit of code sample for resize feature.

In the above code, somedivtoresize is the container that needs to have the resize capability. And when we chain resizable method to it we also prove the edges of the container that can be used to resize it. Here we have dive resizable by all four edges. The resizemove event allows us to change the container attributes e.g. width height using the data received from event callback parameter.

Now this was working fine and i could resize without any issues on desktop but it would cause problems on mobile devices like an iPhone where the container edge would become too small to grab. For that, i needed to implement a button of sort that would act as resize handler.

That is when i made following modifications to the code.

What i did was to add bind a new down event with  our resize button (#resize-handle). After that we start a new interaction that would need to have same edges as defined in the previous interaction, which is why we provide interact instance for second parameter and container object of the same for the third in interaction.start(). The moveHandler() function is used to make sure the resize button moves as the container resizes.

Also, in addition to js you will need to define edges which your button will resizein your button html, like so:

In the above code data-right makes sure that our button only resizes the right edge.

And that’s it! You have now a button as a resize handler. To have a look at the full code and demo, see this fiddle.

 

alexey

alexey

Application developer, movie buff, occasional reader and a huge Manchester United fan.
alexey

Application developer, movie buff, occasional reader and a huge Manchester United fan.