What I wish to accomplish at the client side is to show an image and let the user cut up an image into tiles of various heights while making sure that there are no gaps(vertically) and that all the pieces are of the same width(the widget of the original image). Initially the image will be cut up into a fixed(don't want to allow addition/delection of pieces) number of pieces of pre-determined height and when the user hovers over the horizontal boundary lines, he has the option of dragging the boundary up and down to vary the height of each piece.
_________
|____V____|
| ^ |
|____V____|
| ^ |
| |
| |
|____V____|
|____^____|
I've taken a look at griddy , but looks like it's static. JCrop and imgSelectArea allows only one selection at a time and I can't let the users make mistakes, leaving vertical gaps between pieces.