jQuery Click and Drag

Click one div and drag to change the color of the rest.

by Colin Soderstrom

HTML

<p>Click and hold the button below and the gray bars will turn red during the mouse down portion of the click!</p>
<div class="clckDwn"><p>Click and Drag Here</p></div>
<div class="clckDwn"></div>
<div class="clckDwn"></div>
<div class="clckDwn"></div>
<div class="clckDwn"></div>
<div class="clckDwn"></div>
<div class="clckDwn"></div>

CSS

p {
    font-family: arial;
}
.clckDwn {
    background-color: gray;
    text-align: center;
    cursor: pointer;
    width: 100%;
    height: 30px;
    margin-bottom: 1px;
}
.clckDwn p{
    color: white;
    padding-top: 5px;
}

JavaScript

$(document).ready(function() {
    $('.clckDwn').mousedown(function() {
        $(this).css("background-color", "red");
        $('.clckDwn').mousemove(function() {
            $(this).css("background-color", "red");
        });
    });
});