Drag-Highlight

JQuery visual row selection.

by kitsu_eb

HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS

.box {
    //float: left;
    height: 20px;
    width: 95%;
    border: 1px solid #000;
    margin-right: 10px;
}
.highlight {
    background: #0000FF;
}

JavaScript

$(document).ready(function () {
    var $box = $('.box').mousedown(function () {
        $(this).toggleClass('highlight');
        var flag = $(this).hasClass('highlight')
        $box.on('mouseenter.highlight', function () {
            $(this).toggleClass('highlight', flag);
        });
    });
    $(document).mouseup(function () {
        $box.off('mouseenter.highlight')
    })
});