如何通过使用（单击）鼠标拖动多个 div 来更改它们的背景颜色？

Question

请查看this example。

我这里有 4 个白色背景的 div。 当我单击一个 div 时，它的背景变为蓝色。 当我再次单击它时，背景会变回白色。

现在我想通过拖动来突出显示多个 div：我单击第一个 div 并按住鼠标按钮。 div 变为蓝色。使用单击的按钮，我现在可以拖动其他 div，一旦光标移到元素上，它们的颜色就会改变。

我用 JQuery 的 .mousedown 函数尝试了一些东西，但我没有让它工作。

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

Answer 1

可以使用 mouseenter 事件来处理

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

演示：Fiddle

Answer 2

试试，

$(document).ready(function () {
    var isMouseClicked = false
    $('.box').mousedown(function () {
        isMouseClicked = true;
    }).mouseup(function () {
        isMouseClicked = false;
    }).mousemove(function () {
        if (isMouseClicked) {
            $(this).addClass("highlight");
        }
    });
});

DEMO 或 http://jsfiddle.net/Vk24X/2/