Question

我是编码新手，刚刚创建了Pixel Art Maker！

我正在尝试使用jQuery，我想知道是否： •有一个适当的事件方法，我可以调用它来创建一个效果：＆＃34;如果我点击并将鼠标拖过某些单元格，则单元格的颜色会发生变化。＆＃34;

目前我将我的表设置为您单击它的位置，它会添加颜色，如果再次单击它，它会删除颜色。

我希望用户只需拖动鼠标即可获得与绘图效果相同的效果。

我尝试使用mouseDown（）和select（）实现但是没有用。

如何实现这一点的任何帮助将不胜感激。如果你不直接给我确切的答案，那就更好了，但是给我一些关于我应该使用的jQuery事件方法和监听器以及我将它放在代码中的提示，以便我可以学习。

全部谢谢！

Codepen演示：https://codepen.io/chaycesol/full/Qmmyjq

var height, width, color;
// When size is submitted by the user, call makeGrid()
$('#sizePicker').submit(function (event) {
  event.preventDefault();
  height = $('#inputHeight').val();
  width = $('#inputWeight').val();
  makeGrid(height, width);
});

function makeGrid(h,w) {
//Removes grid if one is already present before pressing submit  
$('tr').remove();

// Creating each table row
for (var i= 1; i <= h; i++) {
    $('#pixelCanvas').append('<tr id=table' + i + '></tr>');
    for (var j = 1; j <=w; j++) {
        $('#table' + i).append('<td></td>');
    }
}

//Draw with color in table cells
$('td').click(function addColor() {
    color = $('#colorPicker').val();

    if ($(this).attr('style')) {
        $(this).removeAttr('style')
    } else {
        $(this).attr('style', 'background-color:' + color);
    }
});

jQuery鼠标拖动事件添加颜色？

0 个答案: