Сделал в виде события -
https://www.dropbox.com/s/masf1jhjpe...nts%20Event.js
Пример -
http://fiddle.jshell.net/h8G3g/5/
И опять же, если вам не трудно, посмотрите, что сделано не правильно/не логично.
Буду рад услышать, все, что приходит на ум по коду и его оформлению.
Возможности
Бинд событий:
selelemstart - происходит только при первом mousemove после нажатия.
selelem - происходит каждый раз после нажатия, когда водишь мышью.
В объекте события передаются элементы которые были задеты выделением -
lastSelectedElements
selelemend - происходит при mouseup.
В объекте события передаются элементы которые были задеты выделением -
lastSelectedElements и выделенные элементы
selectedElements;
При бинде можно передать дополнительные параметры событию:
selectableClass - класс элемента который можно будет выделить, по умолчанию = 'selectable'.
visualSelectionClass - класс блока визуального выделения, по умолчанию = 'selection'.
//Создаем обработчики для #block, где выделяемые элементы будут иметь класс .element
$('#block').bind('selelem', {selectableClass: 'element'}, selelemHandler);
$('#block').bind('selelemend', selelemendHandler);
function selelemHandler(e){
console.log('---задеты выделением---');
console.log(e.lastSelectedElements);
}
function selelemendHandler(e){
console.log('---задеты выделением---');
console.log(e.lastSelectedElements);
console.log('---выделенные---');
console.log(e.selectedElements);
}
Управление выделенными элементами:
$(elem)
.controlSelectedElemets() - возвращает объект контроля над выделением данного элемента.
Объект контроля содержит 3 метода:
.add(array) - добавляет к массиву выделенных элементов
.clear() - очищает массив выделенных элементов
.get() - возвращает массив выделенных элементов
$('#button').click(function(){
//создаем объект контроля над выделением конкретного блока
var blockSelection = $('#block').controlSelectedElemets();
//выведет массив выделенных объектов
console.log(blockSelection.get());
});