Javascript 如何使用HTML5颜色输入更改鼠标点击和拖动div的背景颜色

我想通过单击并拖动div到颜色输入中的颜色值来更改div的背景色。

HTML:

<div class="center">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

<div class="center" id="colorDiv">
  <input type="color" id="colorPicker">
</div>

---

这是我的
这是我想要的效果，但颜色值：

使用jQuery执行此操作：

    var div = $('.square');
    div.mousedown(function() {
        $(this).css("background-color", $("#colorPicker").val());
        //add this line
        div.on("mouseenter.square",function(){
             $(this).css("background-color", $("#colorPicker").val());
        });
    });

$（文档）.ready（函数（）{
$（'input'）。在（'change'，function（）上{
var color=$（“#colorPicker”）.val（）；
$（“.square”）.css（“背景色”，颜色）；
});
});
广场
{
宽度：100%；
身高：20%；
浮动：左；
位置：绝对位置；
}
#采色器
{
最高：20%；
位置：相对位置；
}

这可能是您想要的

var div = $('.square')
div.mousedown(function() {
    $(this).css("background-color", $("#colorPicker").val())
    div.mouseenter(function() {
        $(this).css("background-color", $("#colorPicker").val())
    })
})
$(document).mouseup(function() {
    div.off('mouseenter')
})

---

谢谢你的回复，这也是在我点击一个方块之后，然后在其他方块上移动鼠标也会改变它们的颜色。我只想在鼠标向下移动时更改颜色。@IshT.，然后您需要将颜色更改回鼠标上的前一种颜色。onmouseup这正是我想要的，非常感谢您的帮助！

<script type="text/javascript">
$(document).ready(function(){
    $('input').on('change', function() {
        var color = $("#colorPicker").val();
        $(".square").css("background-color", color);
    });
});
</script>
<div class="center">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>

<div class="center" id="colorDiv">
<input type="color" id="colorPicker">
</div>

<style type="text/css">
.square
{
    width: 100%;
    height: 20%;
    float: left;
    position: absolute;
}
#colorPicker
{
    top: 20%;
    position: relative;
}
</style>

var div = $('.square')
div.mousedown(function() {
    $(this).css("background-color", $("#colorPicker").val())
    div.mouseenter(function() {
        $(this).css("background-color", $("#colorPicker").val())
    })
})
$(document).mouseup(function() {
    div.off('mouseenter')
})