Question

如果这个问题的信息太多，我会在必要时将其发布为两个。

我正在开发一个基于网络的应用来制作像素艺术，同时自学Javascript和jQuery。这个SITE显示了我迄今所取得的成就。

截至目前，我有两个问题，我不确定它们是否足够大，可以单独提问。

当您单击时，它会为方块着色，当您单击并拖动时，它将为所有方块着色，但不会显示您最初单击的方块。
当您单击一个正方形并拖动时，这将撤消在您移动时已着色的正方形。我似乎无法弄清楚如何改变这种行为。

以下是我目前所拥有的JSFiddle。

HTML：

Row Count:
<input type="text" id="rowcount" />Column Count:
<input type="text" id="columncount" />
<input type="button" onclick="createTable();" value="Create Table" />
<div id="box" oncontextmenu="return false;"></div>

CSS：

table {
    width:500px;
    height:500px;

}
    #box {
    width:500px;
    height:500px;

}
td {
    padding:0px;
    margin:0px;
    border:1px solid #ccc;
    cursor:pointer;
}

    tr {
    padding:0px;
    margin:0px;
    cursor:pointer;
}


.active {
    background-color:#aaa;
}
::selection {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
::-moz-selection {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

最重要的部分，JS / jQuery：

function createTable() {

mytable = $('<table cellspacing=0></table>').attr({
    id: "pixelGrid"
});
var rows = new Number($("#rowcount").val());
var cols = new Number($("#columncount").val());
var tr = [];
for (var i = 0; i < rows; i++) {
    var row = $('<tr></tr>').attr({
        class: ["pixelRow"].join(' ')
    }).appendTo(mytable);
    for (var j = 0; j < cols; j++) {
        $('<td></td>').text("").appendTo(row);
    }

}
mytable.appendTo("#box");


}

$(function () {
$(document).on('click', 'td', function () {
    $(this).toggleClass('active');
    });
});

$(function () {

isMouseDown = false

$('body').mousedown(function () {
    isMouseDown = true;
})
    .mouseup(function () {
    isMouseDown = false;
});

$(document).on('mouseenter', 'td', function () {
    if (isMouseDown) $(this).toggleClass('active');
});

});

所以，我的问题是，我怎么能拥有它，这样当我点击并拖动时，它会为最初点击的方块着色，如何在它们经过它们时“停止”它们？

Answer 1

尝试

$(function () {

    //use a closure variable instead of making it a global one
    var isMouseDown = false

    $('body').mousedown(function (e) {
        isMouseDown = true;

        $('#pixelGrid td').data('hovered', false);

        //the mouse enter will fire only when mouse moved in from outside, here we register a mousemove handle which will be fired only once
        $(e.target).closest('.pixelRow td').one('mousemove.pixelGrid', function () {
            if (isMouseDown) {
                $(this).toggleClass('active').data('hovered', true)
            }
        })
    }).mouseup(function (e) {
        isMouseDown = false;
        $(e.target).closest('.pixelRow td').off('mousemove.pixelGrid');
    });

    $(document).on('mouseenter', 'td', function () {
        if (isMouseDown && !$(this).data('hovered')) {
            $(this).toggleClass('active').data('hovered', true)
        }
    });

});

演示：Fiddle

jQuery中的选择性mouseenter / mousedown

1 个答案: