Выделение div по горизонтали или вертикали

#javascript #jquery

пример: https://jsfiddle.net/vrtnw5xf/1/

как реализовать чтобы за одно "зажатие" кнопки мыши можно было выделить от 1 до 4
клеток только во вертикали или по горизонтали?

$(function() {
var isMouseDown = false;
$(".custom-cell").mousedown(function() {
    isMouseDown = true;
    $(this).toggleClass("custom-cell-clicked");
    return false; // prevent text selection
}).mouseover(function() {
    if (isMouseDown) {
        $(this).toggleClass("custom-cell-clicked");
    }
}).on("selectstart", function() {
    return false; // prevent text selection in IE
});

$(document).mouseup(function() {
    isMouseDown = false;
});
});

    

Ответы

Ответ 1

что-то вроде этого нужно?

$(function() {
  var isMouseDown = false;
  var clickedCell;
  var mouseMove;
  var oldMouseMove;

  $(".custom-cell").mousedown(function() {
    isMouseDown = true;

    clickedCell = $(this).data("id");

    $(this).toggleClass("custom-cell-clicked");
    return false; // prevent text selection
  }).mouseover(function(event) {
    if (isMouseDown) {

    oldMouseMove = mouseMove;

    if(clickedCell == ($(this).data("id")-1) || clickedCell == ($(this).data("id")+1)) {
        mouseMove = "horisontal";
    } else {
        mouseMove = "vertical";
    }

    if(oldMouseMove == undefined || oldMouseMove == mouseMove) {
      $(this).toggleClass("custom-cell-clicked");
    } else {
        isMouseDown = false;
    }

        clickedCell = $(this).data("id");



    }
  }).on("selectstart", function() {
    return false; // prevent text selection in IE
  });

  $(document).mouseup(function() {
    isMouseDown = false;
    mouseMove = undefined;
    oldMouseMove = undefined;
    clickedCell = undefined;
  });
});


https://jsfiddle.net/vrtnw5xf/3/