Почему мои перетаскиваемые элементы не работают должным образом? ⇐ CSS

[Anonymous]

Я пытаюсь сделать несколько элементов перетаскиваемыми с помощью Interact.js в моем проекте CodePen, но это не работает должным образом. Когда я добавляю к элементам атрибут draggable="true", не все из них правильно реагируют на события перетаскивания, только последний. Все элементы перед последним ведут себя странно: при начале перетаскивания уже срабатывает перетаскивание.



Element 1

Element 2

Element 3

Element 4










Вот моя настройка:

• Я использую Interact.js для обработки перетаскивания.
• Мне нужно, чтобы каждый элемент можно было перетаскивать и ограничивать внутри родительского контейнера.

Вот мой CodePen: https://codepen. io/brentrug/pen/OPLEJKj
Что я пробовал:

• Атрибут перетаскивания применяется к каждому элементу.
• Я применил модификаторы инерции, автопрокрутки и ограничения, чтобы сделать перетаскивание плавным и ограничить перемещение родительского контейнера.

Чего я ожидаю:

• Каждый элемент должен правильно перетаскиваться. Не только последний

Может ли кто-нибудь помочь мне понять, почему это не работает?
Любые советы Буду очень признателен за то, как я могу это исправить!
Это JS-код:
// Select all the .element divs
const elements = document.querySelectorAll('.element');

// Loop through each element and apply interact separately
elements.forEach(element => {
interact(element)
.draggable({
inertia: false, // Remove inertia for more responsive dragging
autoScroll: false,
modifiers: [
interact.modifiers.restrict({
restriction: 'parent',
endOnly: true
})
],
listeners: {
start(event) {
console.log('Drag started on', event.target.id);
const { target } = event;
target.classList.add('dragging');
target.style.zIndex = '1000'; // Higher z-index to ensure it's above other elements

// Set initial position for 'absolute' positioning (only for the dragged element)
const rect = target.getBoundingClientRect();
target.setAttribute('data-x', rect.left);
target.setAttribute('data-y', rect.top);

// Ensure position is set to absolute for the dragged element
target.style.position = 'absolute';
},
move(event) {
console.log('Dragging', event.target.id);
const { target } = event;

// Calculate new left and top values
const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

// Set the left and top properties for movement
target.style.left = `${x}px`;
target.style.top = `${y}px`;

// Store the new position
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
},
end(event) {
console.log('Drag ended on', event.target.id);
const { target } = event;

// Reset the element's position after drop
target.style.position = ''; // Reset position to original state
target.style.left = '';
target.style.top = '';
target.removeAttribute('data-x');
target.removeAttribute('data-y');
target.classList.remove('dragging');
target.style.zIndex = '1';

// Get the board where the element was dropped
const board = document.querySelector('.board'); // Assuming this is your board element

// Calculate final position relative to the board
const dragRect = event.rect;
const boardRect = board.getBoundingClientRect();
const x = dragRect.left - boardRect.left;
const y = dragRect.top - boardRect.top;

// Account for scroll position
const scrollX = window.scrollX || window.pageXOffset;
const scrollY = window.scrollY || window.pageYOffset;

// Adjust coordinates for scroll position
const adjustedX = x - scrollX;
const adjustedY = y - scrollY;

// Create new element with adjusted coordinates
const newElement = createElementOnBoard(target, adjustedX, adjustedY);
board.appendChild(newElement); // Append the new element to the board
}
}
});
});


Подробнее здесь: https://stackoverflow.com/questions/793 ... s-expected