Hello
Here:
https://vmars.us/Guitar/Which-Button-was-CLICKED-getElementById.html
I am trying to Drag-in-Drop two images , but they 'Don't Drag' .
Code runs 'buttonPressed' First , then attemps to run 'function dragElement' .
In the code below , there seems to be 'Two Trouble Spots' ,
line 114 and line 52 .
Can someone Please tell me what I am doing Wrong .
Thanks for your Help...
Here:
https://vmars.us/Guitar/Which-Button-was-CLICKED-getElementById.html
I am trying to Drag-in-Drop two images , but they 'Don't Drag' .
Code runs 'buttonPressed' First , then attemps to run 'function dragElement' .
In the code below , there seems to be 'Two Trouble Spots' ,
line 114 and line 52 .
Can someone Please tell me what I am doing Wrong .
Thanks for your Help...
Code:
<!DOCTYPE html>
<html>
<head>
<style>
img {
margin: 5px;
padding: 5px 8px;
outline: none;
// background: #32bacf;
border: none;
color: white;
// border-radius: 5px;
font-size: 1em;
}
img:hover {
// background-color: #ffa000;
cursor: pointer;
}
#result {
border:1px solid;
display:inline-block;
margin:5px;
/* padding:5px; */
}
</style>
</head>
<body>
<div id="image-group">
<img id="Red-Circle" draggable="true"
src="https://vmars.us/Guitar/1-Red-Circle-Transp-32x32.png" width="32px" height="32px">
<img id="flatAccidental" draggable="true"
src="https://vmars.us/Guitar/flatAccidental-Grey-28x28.png" width="28px" height="28px">
<img id="naturalAccidental-Grey-28x28" draggable="true"
src="https://vmars.us/Guitar/naturalAccidental-Grey-28x28.png" width="28px" height="28px">
<img id="sharpAccidental-Grey-28x28" draggable="true"
src="https://vmars.us/Guitar/sharpAccidental-Grey-28x28.png" width="28px" height="28px">
</div>
<div id="result"></div>
<script>
var elmnt ;
var timesIn = 0 ;
//document.addEventListener("mousedown", dragElement);
function dragElement(holdTargetId) { // line 52
if (timesIn < 1 ) {return}
timesIn = timesIn + 1 ;
console.log("function dragElement(elmnt" + holdTargetId) ;
// var savedTargetId = event.target.id ;
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
console.log("console.log says = " + holdTargetId);
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
console.log("function dragMouseDown(e)") ;
e = e || window.event;
e.preventDefault();
console.log("function dragMouseDown(e)") ;
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
console.log("function elementDrag(e)") ;
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
console.log("function closeDragElement()")
document.onmouseup = null;
document.onmousemove = null;
}
</script>
<script>
var holdTargetId = "" ;
//var ee ;
var thruCount = 1;
const buttons = document.getElementsByTagName("img");
const result = document.getElementById("result");
const buttonPressed = e => {
let ee = e ;
result.innerHTML = e.target.id;
holdTargetId = e.target.id;
console.log("You clicked this image = " + holdTargetId ) ;
dragElement(holdTargetId); // line 114
}
for (let button of buttons) {
console.log( "Iimage = " + thruCount);
button.addEventListener("click", buttonPressed);
thruCount = thruCount + 1;
}
</script>
</body>
</html>