Блог

У меня есть изображение (1000×1300 пикселей), и я хочу наложить на него сетку с ячейками 10×10 пикселей (таким образом, это будет 100×130 ячеек). Тогда должен быть способ щелкнуть левой кнопкой мыши, переместить по сетке и «отметить» нижележащие ячейки сетки (т. Е. изменить цвет фона). На данный момент у меня есть следующий исходный код в jQuery

 $(window).ready(function() {
    $("body").mousedown(function() { mstate = 1; }).mouseup(function() { 
        mstate = 0; 
    });
    var container = document.getElementById("grid");
    var divs = "";
    for (var y in grid) {
        divs  = "<tr>";
        for (var x in grid[y]) {
            var class = "cellinactive";
            if (grid[y][x]==1) class = "cellactive";
            else if (grid[y][x]==2) class = "cellreserved";
            else if (grid[y][x]==3) class = "cellsold";
            divs  = "<td class='"   class   "'>amp;nbsp;</td>";
        }
        divs  = "</tr>";
    }
    divs = "<table>"   divs   "</table>";
    container.innerHTML = divs;
    $("#grid td").css({ "opacity": "0.7" }).html("").mouseover(function() {
        if (mstate == 1) {
            if (rgb2hex($(this).css("background-color")) == "#ffff00") 
                $(this).css("background-color", "#0ff");
            else 
                $(this).css("background-color", "#ff0");
        }
    });
});

var grid = "";
var mstate = 0;
  

сетка содержит двумерный массив (размер 130×100). Я пытался создать сетку на основе DIVs, но это намного медленнее, чем TDs. Есть ли у кого-нибудь какой-нибудь намек на повышение производительности этого фрагмента? При тестировании в Firefox 4 «щелчок, удержание и перемещение» мыши не очень эффективны, при непрерывном рисовании линии возникают пробелы. (Извините, если мой английский не самый лучший 😉
С уважением

Возможно, вам будет проще использовать методы DOM, а не создавать строку:

Живая демонстрация

(Только базовая версия, поддерживает щелчки, но не перетаскивание)