jquery - How can I change the background color of multiple divs by dragging over them with the (clicked) mouse? -

please have @ this example.

i have 4 divs here white background. when click on div, background changes blue. when click again background switches white.

now want highlight multiple divs dragging on them: click on first div , hold mouse button down. div gets blue. clicked button can drag on other divs , color changed cursor on element.

i haved tried things jquery's .mousedown function did not work.

html:

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

css

.box{     float: left;     height: 100px;     width: 100px;     border: 1px solid #000;     margin-right: 10px; }  .highlight{     background: #0000ff; } 

js

$(document).ready(function(){    $('.box').click(function(){         if($(this).hasclass('highlight')){             $(this).removeclass('highlight');         }         else{             $(this).addclass('highlight');         }     }); }); 

you can use mouseenter event handle it

$(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')     }) }); 

demo: fiddle