Question

我想通过点击并拖动颜色输入的颜色值来更改我的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>

使用Javascript：

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

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

Answer 1

使用您的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());
        });
    });

Answer 2

<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>

Answer 3

这可能是你想要的。

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

如何在鼠标单击并使用HTML5颜色输入拖动时更改div的背景颜色

3 个答案: