Как реализовать область выделения на пустом диве?

Question

[Антон]

Здравствуйте!
Подскажите, пожалуйста, как можно реализовать выделение любого участка на пустом диве так, чтобы ещё был виден, например, полупрозрачный прямоугольник, который будет тянуться за курсором?
Для выбора элементов в jquery ui есть .selectable(); Там видна прямоугольная область при выделении элементов. Так вот нужно, чтобы сама область выделения была видна.
---
Пример: я выделил небольшой участок на пустом диве. Отпустил курсор. Выделенный участок остался на диве.
---
Дополнение: если будет решение моего вопроса, то можете, пожалуйста, ещё сказать потом то, как менять размеры выделенного участка (мышкой)?

Answer 1

[Иван]

Может подойдет
odyniec.net/projects/imgareaselect

UPD: Пример использования с дивами jsfiddle.net/jrvkykj5/2

Comments

[Антон]

Это я видел. Но это для изображения. И область сугубо квадратная.

[Иван]

Что мешает модифицировать под свои нужны? И область там может быть не только квадратной odyniec.net/projects/imgareaselect/examples.html

[Антон]

@0neS я в jquery только начинаю разобраться. Не могли бы Вы, пожалуйста, подсказать, где мне поменять код так, чтобы она работало не для картинки, а для дива?

[Иван]

@Yadalay оказалось, что этот плагин отлично работает с обычными div'ами, обновил ответ

[Антон]

@0neS Спасибо большое)

[Антон]

@0neS возник вопрос ещё у меня: как мне в js написать условие, что выделена уже область?
Я хочу сделать примерно так:
1. Выделил область.
2. Нажимаю кнопку Enter.
3. Происходит действие.
--
2 и 3 пункт я знаю, как сделать. А вот как проверить, выделена ли область?

[Иван]

@Yadalay почитайте документацию плагина. odyniec.net/projects/imgareaselect/usage.html
Как вариант — использование метода onSelectEnd

[Антон]

@0neS Спасибо.