Разметка сетки CSS - как определить, какая ячейка сетки находится с помощью javascript?

Ответ 1

Добавьте прослушиватель событий к родительскому элементу сеток сетки. Его называемая делегирование событий. Вы можете использовать event.target в событии зависания и внутри цикла для сравнения ev.target.parent element==document.querySelect("#parentElement")[index] Опубликуйте весь код html кода ur, чтобы написать его, если хотите.

Ответ 2

Я думаю, что вы ищете решение для сеток разных размеров, когда идея сеток состоит в том, что они всегда одного размера (totalWidth/gridNumber). Только элементы могут переполнять 1,2,5 или более сетки. Я сделал небольшой объект, чтобы определить изменение числа сетки, если я неправильно понял что-то, объясните в комментарии.

http://codepen.io/devrafalko/pen/bBOQbo?editors=1011

gridDetect = {
  gridNum:12,
  currentGrid:null,
  callback:null,
  initGridDetect: function(fun){
    var b = this.detectGrid.bind(this);
    document.addEventListener('mousemove',b);
    this.callback = fun;
  },
  detectGrid: function(event){
    var w = document.body.clientWidth;
    var mouse = event.clientX;
    var limitMouse = mouse > w ? w:mouse;
    var getGridNumber = Math.floor(limitMouse/(w/this.gridNum));
    if(this.currentGrid!==getGridNumber){
      this.currentGrid = getGridNumber;
      this.callback(getGridNumber);
    }
  }
}


gridDetect.initGridDetect(function(grid){
  console.log(grid);
  //it called when the grid is about change
  //do what you want here with grid argument
});

Ответ 3

Здесь у вас есть две задачи:

• Элемент обнаружения.
• Получение столбца/строки элемента.

Элемент обнаружения

Вы можете избежать обнаружения элемента, если добавить необходимый обработчик событий для каждого элемента сетки.

Но если вы хотите добавить курсор мыши (или другой обработчик событий), вы можете добавить цикл через каждый элемент сетки и использовать метод element.getBoundingClientRect(). Демо (я добавлю обработчик для щелчка, чтобы избежать заражающей консоли):

var grid = document.querySelector(".grid");

grid.addEventListener("click", function(event) {
  var gridItems = this.children;
  for (var i = 0; i < gridItems.length; i++) {
    var gridItem = gridItems[i];
    var rect = gridItem.getBoundingClientRect();
    var elementDetected = event.clientX >= rect.left
    	&& event.clientX <= rect.right
      && event.clientY >= rect.top
      && event.clientY <= rect.bottom;
    if (elementDetected) {
      console.log(gridItem);
      return;
    }
  }
  
  console.log("no element detected!");
});

.grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 10px;
}

/* styles just for demo */
.grid__item {
  background-color: tomato;
  color: white;
  
  /* styles for centering text */
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="grid">
  <div class="grid__item">One</div>
  <div class="grid__item">Two</div>
  <div class="grid__item">Three</div>
  <div class="grid__item">Four</div>
  <div class="grid__item">Five</div>
  <div class="grid__item">Six</div>
  <div class="grid__item">Seven</div>
  <div class="grid__item">Eight</div>
  <div class="grid__item">Nine</div>
</div>

Ответ 4

Добавьте пустые элементы с настраиваемым тегом или классом в верхний и левый края сетки, создайте их с помощью "растянуть", а затем добавьте ширину/высоту, чтобы получить координаты линий сетки.