New Version here -> YDRjRectangle – JQuery rectangle selection – new version

Do you know the rectangle selection tool in photoshop to select different pixels of an image? I want to have something similar on my website for different scenarios, like cropping parts out of an image or select a couple of elements inside a table or something like that. I found some plugins that could do this job, but they are using a image as „frame“ where you can select some pixels and crop the image and thats it. I needed something similar to select any kind of dom object within a defined area so I started to develop a small implementation for this idea. (next version).

The first thing I wanted to do was drawing an image to get a animated, dashed rectangle, that looks like the one in photoshop, but it was a bit too oversized for my project so I started playing around with a div element, that has a dynamic width and height and fetches to the cursor and gives the user a known selecting experience.

What I did was creating a „frame“ object where the selection can take place and added a hidden div object within this frame. I used an opacity of 40% and a thin 2px white border for the selection div to get a nice looking selection object.

The next step was writing some small functions for resizing the selection div element to imitate the selection behaviour. The whole resizing is done by mouse eventhandler on the initial selection frame.

There is no additional functionality in this early version, its more like a proof of concept if the browser can draw the selection div accurate. The next version will include a selection of tablerows and div elements.

Update: I had to rewrite my code and changed the selection div position to absolute (and correct the mouse axis calculation) to avoid problems with inline elements like my test table.

Afterwards I created a function that compares every center point of my table elements with the selection div and if it is inside the selection, the bordercolor of the table element will turn red.

Here is my codeexample:
Base code example: http://jsfiddle.net/yodero/rPb7v/

Try out a Demonstration: