I’m new to Javascript, but getting close to finishing the vanilla JS for a mock desktop UI project: opening asides as “windows” that can be reordered, selected, and moved independently anywhere on the page. (I’m building a blog that mimics a desktop.)
I’m having trouble on that last part: getting my drag & drop functions to target one aside at a time. I have three asides that I want to drag, drop, then fix to the page while other asides are moved. The first drag & drop often works, but subsequent moves will capture and move all of the other open “windows” together.
Here is my project Fiddle: https://jsfiddle.net/kze09617/#&togetherjs=dd5Ez1bMHO
To open windows, click the toggle buttons.
I think the issue might be in how I’ve ordered or layered my functions; I’m brand new to JS, but am trying to learn the ropes by reinventing wheels.
I have set a function to add the class “.active” (which adds position: absolute and transform: translateZ(10) to each aside onclick) and remove it from the others:
function bringForward(elem) {
var windows = document.querySelectorAll("aside");
for (i = 0; i < windows.length; i++) {
windows[i].classList.remove('active');
windows[i].style.draggable === "false"
windows[i].style.position === "fixed";
}
elem.classList.add('active');
elem.style.draggable === "true";
elem.style.position === "absolute";
}
And set event listeners, so if a window is clicked again, it will allow drag & drop. Attempting to prevent my collective moving issue, I separated each drag & drop function by window, but it didn’t work. This makes me think the issue could be in the drag & drop functions themselves:
windowOne.addEventListener('click', function() {
if (windowOne.classList.contains('active')) {
function dragStart (e) {
var style = window.getComputedStyle(e.target, null);
e.dataTransfer.setData("text/plain",
(parseInt(style.getPropertyValue("left"), 10) - e.clientX) + ',' + (parseInt(style.getPropertyValue("top"), 10) - e.clientY));
}
function dragOver (e) {
e.preventDefault();
return false;
}
function dropDown (e) {
var offset = e.dataTransfer.getData("text/plain").split(',');
var dm = document.getElementById('window1');
dm.style.left = (e.clientX + parseInt(offset[0],10)) + 'px';
dm.style.top = (e.clientY + parseInt(offset[1],10)) + 'px';
e.preventDefault();
return false;
}
var dm = document.getElementById('window1');
dm.addEventListener('dragstart', dragStart, false);
document.body.addEventListener('dragover', dragOver, false);
document.body.addEventListener('drop', dropDown, false);
}
else {
windowOne.classList.add('active');
}
})
windowTwo.addEventListener('click', function() {
if (windowTwo.classList.contains('active')) {
function dragStart2 (e) {
var style = window.getComputedStyle(e.target, null);
e.dataTransfer.setData("text/plain",
(parseInt(style.getPropertyValue("left"), 10) - e.clientX) + ',' + (parseInt(style.getPropertyValue("top"), 10) - e.clientY));
}
function dragOver2 (e) {
e.preventDefault();
return false;
}
function dropDown2 (e) {
var offset2 = e.dataTransfer.getData("text/plain").split(',');
var dm2 = document.getElementById('window2');
dm2.style.left = (e.clientX + parseInt(offset2[0],10)) + 'px';
dm2.style.top = (e.clientY + parseInt(offset2[1],10)) + 'px';
e.preventDefault();
return false;
}
var dm2 = document.getElementById('window2');
dm2.addEventListener('dragstart', dragStart2, false);
document.body.addEventListener('dragover', dragOver2, false);
document.body.addEventListener('drop', dropDown2, false);
}
else {
windowTwo.classList.add('active');
}
})
windowThree.addEventListener('click', function() {
if (windowThree.classList.contains('active')) {
function dragStart3 (e) {
var style = window.getComputedStyle(e.target, null);
e.dataTransfer.setData("text/plain",
(parseInt(style.getPropertyValue("left"), 10) - e.clientX) + ',' + (parseInt(style.getPropertyValue("top"), 10) - e.clientY));
}
function dragOver3 (e) {
e.preventDefault();
return false;
}
function dropDown3 (e) {
var offset3 = e.dataTransfer.getData("text/plain").split(',');
var dm3 = document.getElementById('window3');
dm3.style.left = (e.clientX + parseInt(offset3[0],10)) + 'px';
dm3.style.top = (e.clientY + parseInt(offset3[1],10)) + 'px';
e.preventDefault();
return false;
}
var dm3 = document.getElementById('window3');
dm3.addEventListener('dragstart', dragStart3, false);
document.body.addEventListener('dragover', dragOver3, false);
document.body.addEventListener('drop', dropDown3, false);
}
else {
windowThree.classList.add('active');
}
})
Any advice is appreciated – I really hope I can make this work.
