Идея в том, чтобы добавить дополнительный слой сетки за пределы контейнера. давайте назовем это «псевдоконтейнером». Этот псевдоконтейнер будет абсолютно позиционирован. Он будет содержать элементы в столбцах с шириной 16,6% и высотой, соответствующей сетке. Теперь мы можем связать указатель мыши с псевдоэлементами.
На основе ответа @Ian я сделал скрипку:
сначала создайте несколько псевдоэлементов:
var cont = $(".pseudoContainer");
for (var i = 0; i < 18; i++) {
var newDiv = document.createElement("div");
newDiv.setAttribute('class', 'pseudoitem');
newDiv.innerHTML = '<div class="pseudoitem-inner"></div>';
cont.append(newDiv);
}
затем добавьте слушателя:
Array.from(document.getElementsByClassName("pseudoitem-inner")).forEach(element => {
element.addEventListener("mouseenter", () => {
const style = window.getComputedStyle(element);
currentCellPosition = {
"grid-row-start": style.gridRowStart,
"grid-row-end": style.gridRowEnd,
"grid-column-start": style.gridColumnStart,
"grid-column-end": style.gridColumnEnd
}
console.log(currentCellPosition);
})
})
с некоторыми стилями, которые вы видите:
.pseudoContainer{
position:absolute;
top:0;
left:0;
width: 100%;
display: block;
padding: 3px;
z-index:1;
}
.pseudoitem{
width: calc(16.6% - 10px);
height: 126px;
float: left;
padding: 5px 5px 5px;
z-index:2;
}
.pseudoitem-inner{
background-color: red;
height: 100%;
width: 100%;
}
.container{
z-index:1;
}
.grid-stack-item{
z-index:3;
}
теперь вам нужно только усовершенствовать процесс создания псевдоэлементов, чтобы они содержали информацию сетки.
вот скрипка
РЕДАКТИРОВАТЬ: Теперь вы получите необходимую информацию о перекладывании. Здесь также можно добавить дополнительный слой сетки за пределы контейнера и установить абсолютную позицию. К сожалению, это будет работать только для этой сетки, и это действительно не моя лучшая работа. В принципе, это то же самое, что и решение одно, но теперь здесь также используется стиль сетки.
var cont = $(".pseudoContainer");
var y,x;
for (var i = 0; i < 18; i++) {
if(i <= 5) y = 0, x = i;
if(i > 5 && i <= 11) y = 1, x = i - 6;
if(i > 11 && i <= 18) y = 2, x = i - 12;
var newDiv = document.createElement("div");
newDiv.setAttribute('class', 'pseudoitem');
newDiv.setAttribute('data-gs-width', '1');
newDiv.setAttribute('data-gs-height', '1');
newDiv.setAttribute('data-gs-x', x);
newDiv.setAttribute('data-gs-y', y);
newDiv.innerHTML = '<div class="pseudoitem-inner"></div>';
cont.append(newDiv);
}
for(let elm of document.getElementsByClassName('pseudoitem')){
elm.style['grid-column-start'] = parseInt(elm.getAttribute('data-gs-x')) + 1;
elm.style['grid-column-end'] = parseInt(elm.getAttribute('data-gs-x')) + parseInt(elm.getAttribute('data-gs-width')) + 1;
elm.style['grid-row-start'] = parseInt(elm.getAttribute('data-gs-y')) +1 ;
elm.style['grid-row-end'] = parseInt(elm.getAttribute('data-gs-y')) + parseInt(elm.getAttribute('data-gs-height')) +1;
}
let currentCellPosition = {
"grid-row-start": null,
"grid-row-end": null,
"grid-column-start": null,
"grid-column-end": null
}
Array.from(document.getElementsByClassName("pseudoitem")).forEach(element => {
element.addEventListener("mouseenter", () => {
const style = window.getComputedStyle(element);
currentCellPosition = {
"grid-row-start": style.gridRowStart,
"grid-row-end": style.gridRowEnd,
"grid-column-start": style.gridColumnStart,
"grid-column-end": style.gridColumnEnd
}
console.log(currentCellPosition);
})
})
и стиль:
.pseudoContainer{
position:absolute;
top:10px;
left:10px;
width: 100%;
height: 400px;
display: grid;
z-index:1;
grid-template-columns: repeat(6, 1fr);
grid-gap: 0px;
}
.pseudoitem{
z-index:2;
}
.pseudoitem-inner{
height: 100%;
width: 100%;
}
.container{
z-index:1;
}
.grid-stack-item{
z-index:3;
}
EDIT2: I переписали расчет. теперь вы можете определить параметр «repeat» и «row», и будет автоматически создана сетка layer2.
обновлена скрипка, и вот изменение кода:
var cont = $(".pseudoContainer");
var y,x;
var repeat = 6;
var rows = 3;
for (var i = 0; i < rows*repeat; i++) {
if(i%repeat === 0) {
y = i/repeat;
}
x = i- y * repeat;
var newDiv = document.createElement("div");
newDiv.setAttribute('class', 'pseudoitem');
newDiv.setAttribute('data-gs-width', '1');
newDiv.setAttribute('data-gs-height', '1');
newDiv.setAttribute('data-gs-x', x);
newDiv.setAttribute('data-gs-y', y);
newDiv.innerHTML = '<div class="pseudoitem-inner"></div>';
cont.append(newDiv);
}
for(let elm of document.getElementsByClassName('pseudoitem')){
elm.style['grid-column-start'] = parseInt(elm.getAttribute('data-gs-x')) + 1;
elm.style['grid-column-end'] = parseInt(elm.getAttribute('data-gs-x')) + parseInt(elm.getAttribute('data-gs-width')) + 1;
elm.style['grid-row-start'] = parseInt(elm.getAttribute('data-gs-y')) +1 ;
elm.style['grid-row-end'] = parseInt(elm.getAttribute('data-gs-y')) + parseInt(elm.getAttribute('data-gs-height')) +1;
}
let currentCellPosition = {
"grid-row-start": null,
"grid-row-end": null,
"grid-column-start": null,
"grid-column-end": null
}
Array.from(document.getElementsByClassName("pseudoitem")).forEach(element => {
element.addEventListener("mouseenter", () => {
const style = window.getComputedStyle(element);
currentCellPosition = {
"grid-row-start": style.gridRowStart,
"grid-row-end": style.gridRowEnd,
"grid-column-start": style.gridColumnStart,
"grid-column-end": style.gridColumnEnd
}
console.log(currentCellPosition);
})
})
