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

"css grid layout" = https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Кто-нибудь знает способ javascript для определения того, какой столбец/строка находится в данный момент?

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

MouseGridColumn = round(mouseX / ( gridContainerWidth  / gridTotalColumnsNumber ) )
MouseGridRow    = round(mouseY / ( gridContainerHeight / gridTotalRowsNumber    ) )

Есть ли способ сделать это с не равными ячейками?

Обновление 1 - добавление кодового слова

Вот код, который показывает 3 разных ширины столбцов в процентах (grid-template-columns: 25% 50% 25%;), 2 строки, ячейку сетки без элемента с ней и элемент, который охватывает более одной строки: http://codepen.io/anon/pen/NbeOXp

Обновление 2 - попытка определить, какая ячейка сетки находится в мыши.

Здесь я добавил скрытые элементы в каждую ячейку сетки, чтобы определить, в какую ячейку находится мышь. Однако он возвращает только "auto" для текущего элемента, в котором он находится. Он также довольно неуклюж, чтобы добавить дополнительные скрытые элементы в сетка ИМО.

http://codepen.io/anon/pen/gLZBZw Подсказка: используйте мышь, чтобы навести курсор на сетку.

Ответ 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

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