Programmiererforum

Element 1

Element 2

Element 3

Element 4

// 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
}
}
});
});

Ich versuche, mithilfe von „interact.js“ in meinem CodePen-Projekt mehrere Elemente ziehbar zu machen, aber es funktioniert nicht wie erwartet. Wenn ich den Elementen das Attribut „draggable="true" hinzufüge, reagieren nicht alle korrekt auf Drag-Ereignisse, sondern nur das letzte. Alle Elemente vor dem letzten haben ein seltsames Verhalten: Beim Start des Ziehens wird das Ziehen-Ende bereits ausgelöst.
[code]


Element 1

Element 2

Element 3

Element 4









[/code]
Hier ist mein Setup:
[list]
[*]Ich verwende interagieren.js, um das Ziehverhalten zu handhaben.
[*]Ich benötige, dass jedes Element innerhalb des übergeordneten Containers ziehbar und eingeschränkt sein kann.
[/list]
Hier ist mein CodePen: https://codepen. io/brentrug/pen/OPLEJKj
Was ich versucht habe:
[list]
[*]Das ziehbare Attribut wird auf jedes Element angewendet.
[*]I habe die Modifikatoren „Trägheit“, „AutoScroll“ und „Beschränkung“ angewendet, um das Ziehen reibungsloser zu gestalten und die Bewegung auf den übergeordneten Container zu beschränken.
[/list]
Was ich erwarte:[list]
[*]Jedes Element sollte korrekt ziehbar sein. Nicht nur das letzte
[/list]
Kann mir jemand helfen herauszufinden, warum das nicht funktioniert?
Irgendeine Anleitung Ich würde mich sehr darüber freuen, wie ich das beheben kann!
Dies ist der JS-Code:
[code]// 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
}
}
});
});
[/code]