I still need Help…
Still cant Drop on image , here is my Code:
https://vmars.us/Guitar/2-CIRCLES-1-IMAGE-CREATE-ELEMENTS-ondragover-Prob.html
<!DOCTYPE html>
<!-- saved from url=(0100)file:///C:/2023-Drag-Drop-AnyWhere/TRY-THIS/10-CIRCLES-1-IMAGE-CREATE-ELEMENTS-querySelectorAll.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
file:///C:/2023-Drag-Drop-AnyWhere/TRY-THIS/2-CIRCLES-1-IMAGE-CREATE-ELEMENTS-ondragover-Prob.html
<!-- http://vmars.us/Guitar/2-CIRCLES-1-IMAGE-CREATE-ELEMENTS-ondragover-Prob.html -->
</title>
<style>
body {
margin: 20px;
background-color: white;
}
#elemContainer {
width: 600px;
height: 400px;
// background-color: #333;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 7px;
touch-action: none;
float: left;
}
.item {
display: flex;
border-radius: 50%;
touch-action: none;
user-select: none;
width: 32px;
height: 32px;
// background-color: #F5F5F5; // whitesmoke
font-family: Arial, Helvetica, sans-serif;
text-align:center;
font-size:26px;
z-index: 8;
}
.item , #elem1{
top: 250px;
width: 28px;
width: 28px;
z-index: 1000;
float: left;
}
.item , #elem2 {
width: 28px;
width: 28px;
z-index: 500;
top: 250px;
float: left;
}
#image1 {
z-index:0;
}
.button { border: none; }
#button1 { border: none; background-color: #636363; color: #FFFFFF}
#button2 { border: none; background-color: #CFD7E4;}
#button3 { border: none; background-color: #E3E3E3; ;}
#button4 { border: none; background-color: #FFFBEF;}
#button5 { border: none; background-color: #FFFBA7;}
#hr02 {
display = "block";
}
/*
.item:active {
opacity: .75;
}
*/
.item:hover {
cursor: pointer;
}
h1 {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h4>http://vmars.us/Guitar/2-CIRCLES-1-IMAGE-CREATE-ELEMENTS-ondragover-Prob.html</h4>
<div id="elemContainer" style="position: absolute; width: 1420px; height: 750px; display:inline-block; ">
<br>
<div class="item" id="elem1" style=" position: relative; float:left; left: 30%; top:0; background-color: #FF0004;"> 1</div>
<!-- -->
<div class="item" id="elem2" style=" position: relative; float:left; left: 31%; top: 0; background-color: #FE8E05;"> 2</div>
<!-- -->
<br><br><br>
<div style="height:25px;">
<hr id="hr01">
<div id="elem21" class="item" style="z-index: 402; border-radius: 50%; left: 100px; background-color: rgb(255, 0, 4);"> 1</div>
<div id="elem22" class="item" style="z-index: 403; border-radius: 50%; left: 130px; background-color: rgb(254, 142, 5);"> 2</div>
<hr id="hr02" style="left:0px; display:none;">
</div>
</div> <!-- id="elemContainer" </div> id="outerContainer" -->
<br>
<div id="imageContainer" style=" position: absolute ; top:200px; left:54px; ">
<img id="image1" ondragover="DragEnd(e)" style=" z-index:0; width:1340px; height:284px; " src="http://vmars.us/Guitar/FretBoard-Black-White-1048x222.png">
</div> <!-- id="imageContainer" -->
<div style=" background-color: white; width: 240px; position: absolute ; top: 520px; Left:550px;">
<div style="background-color: white; width: 300x;">
<button class="button" id="button1" onclick="button1Clicked()">Color</button>
<button class="button" id="button2" onclick="button2Clicked()">Color</button>
<button class="button" id="button3" onclick="button3Clicked()">Color</button>
<button class="button" id="button4" onclick="button4Clicked()">Color</button>
<button class="button" id="button5" onclick="button5Clicked()">Color</button>
</div>
</div>
<p id="notes" contenteditable="true" style=" display: block;
height: 150px; width: 1200px; border-color: red; position: absolute ; top: 580px; left: 55px;
border-width: 2px; border-style: solid; border-color: green; ">Notes:
</p>
<p class="item" onclick="alertHelp()" style=" position: absolute; top: 570px; width: 32px; left: 1280px;
background-color: #FFFF0D; display: block; ">? </p>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
</script>
<script>
function button1Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#636363" ;
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
/*
var elements = document.getElementsByClassName("pearlFret")
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "#FFFBA7"
}
*/
}
</script>
<script>
function button2Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#CFD7E4"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
}
</script>
<script>
function button3Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#E3E3E3"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
}
</script>
<script>
function button4Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#FFFBEF"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
}
</script>
<script>
function button5Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#FFFBA7"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
}
</script>
<script>
function alertHelp() {
var newLine = "\r"
var msg = "SLOWLY DRAG Circles onto Fretboard , Click Circle to Drop."
msg += newLine;
msg += "You can Download your Design , and Browser will keep everything in place!";
msg+= newLine;
msg += " ";
msg += newLine;
msg += "Check out Chrome Extension 'Take Webpage ScreenShots' for Capturing your Designs.";
msg+= newLine;
msg += " ";
msg+= newLine;
msg += "At 'https://www.portablefreeware.com/' you can download lots of Freeware:";
msg+= newLine;
msg += " ";
msg+= newLine;
msg += "Screenshot Captor: https://www.portablefreeware.com/index.php?id=2412";
msg+= newLine;
msg += "It takes good snapshots for Selected Regions.";
msg+= newLine;
msg += " ";
msg+= newLine;
msg += "IrfanView: https://www.portablefreeware.com/index.php?id=49";
msg+= newLine;
msg += "Your ScreenShots will be quite Large.";
msg+= newLine;
msg += "Irfanview can Resize these to a much smaller image.";
msg+= newLine;
msg += "Have Fun !";
alert(msg);
}
</script>
<script>
// document.addEventListener("click", showMe(event));
function showMe(event) {
let X = event.screenX;
let Y = event.screenY;
let result = document.getElementById("result");
result.innerHTML = "<b>X-coordinate: </b>" + X + "<br><b>Ycoordinate: </b>: " + Y;
}
</script>
<script>
var elemContainer = document.querySelector("#elemContainer");
var activeItem = null;
var active = false;
if (elemContainer) {
elemContainer.addEventListener("touchstart", dragStart, false);
elemContainer.addEventListener("touchend", dragEnd, false);
elemContainer.addEventListener("touchmove", drag, false);
elemContainer.addEventListener("mousedown", dragStart, false);
elemContainer.addEventListener("mouseup", dragEnd, false);
elemContainer.addEventListener("mousemove", drag, false);
}
function dragStart(e) {
holdID = event.target.id
if (holdID == "elem1" || holdID == "elem2" || holdID == "elem3" || holdID == "elem4" || holdID == "elem5"
|| holdID == "elem6" || holdID == "elem7" || holdID == "elem8" || holdID == "elem9" || holdID == "elem10")
{ console.log("NOPE , " + holdID + " Cannot Drag !") ;
return ;
}
if (e.target !== e.currentTarget) {
active = true;
// this is the item we are interacting with
activeItem = e.target;
if (activeItem !== null) {
if (!activeItem.xOffset) {
activeItem.xOffset = 0;
}
if (!activeItem.yOffset) {
activeItem.yOffset = 0;
}
if (e.type === "touchstart") {
activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
} else {
console.log("doing something!");
activeItem.initialX = e.clientX - activeItem.xOffset;
activeItem.initialY = e.clientY - activeItem.yOffset;
}
}
}
}
function dragEnd(e) {
console.log("function dragEnd(e)") ;
if (activeItem !== null) {
activeItem.initialX = activeItem.currentX;
activeItem.initialY = activeItem.currentY;
}
active = false;
activeItem = null;
}
function cloneDragEnd(e) {
console.log("function cloneDragEnd(e)") ;
if (activeItem !== null) {
activeItem.initialX = activeItem.currentX;
activeItem.initialY = activeItem.currentY;
}
active = false;
activeItem = null;
}
function drag(e) {
if (active) {
if (e.type === "touchmove") {
e.preventDefault();
activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
} else {
activeItem.currentX = e.clientX - activeItem.initialX;
activeItem.currentY = e.clientY - activeItem.initialY;
}
activeItem.xOffset = activeItem.currentX;
activeItem.yOffset = activeItem.currentY;
setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
</script>
<script>
var catchFirstTimeThru = 0 ;
var elemNumber = 1;
var elemName ;
var NodeName ;
var leftPosition = 70 ;
var inComingID ;
var outGoingID ;
// =================================================
document.addEventListener('contextmenu', fireContextMenu);
// This function will be called whenever contextmenu event occurs
function fireContextMenu(event) {
event.preventDefault();
inComingID = event.target.id ;
if (inComingID == "elem1" || inComingID == "elem2" || inComingID == "elem3" || inComingID == "elem4" || inComingID == "elem5"
|| inComingID == "elem6" || inComingID == "elem7" || inComingID == "elem8" || inComingID == "elem9" || inComingID == "elem10")
{ console.log("Yep , " + inComingID + " is Clone-able !") ;
}else{
console.log("NOPE , " + inComingID + " is NOT Clone-able !") ;
return ;
}
// Name a New Element
outGoingID = 'elem2' + elemNumber;
elemNumber = elemNumber + 1
//elemName = elemName + elemNumber ;
console.log("outGoingID = " + outGoingID)
console.log("elemNumber = " + elemNumber) ;
newElement = document.createElement("div");
newElement.style.zIndex = elemNumber + 400 ;
newElement.style.borderRadius = "50%" ;
newElement.id = outGoingID ;
newElement.className = "item" ;
leftPosition = leftPosition + 30 ;
newElement.style.left = leftPosition + "px" ;
if (inComingID == "elem1") {newElement.innerHTML = " 1";
newElement.style.backgroundColor = "#FF0004" ;}
if (inComingID == "elem2") {newElement.innerHTML = " 2";
newElement.style.backgroundColor = "#FE8E05" ;}
if (inComingID == "elem8") {newElement.innerHTML = " ♭";}
if (inComingID == "elem9") {newElement.innerHTML = " ♮";}
if (inComingID == "elem10") {newElement.innerHTML =" #";}
// Inject it into the DOM
var x = document.querySelectorAll("hr");
NodeName = x[1]; // there are only 2 <hr>s
NodeName.parentNode.insertBefore(newElement, NodeName); // line # 381
}
/*
if(holdID == "elem1"){elemBgColor = "background-color: #FF0004;" }
if(holdID == "elem2"){elemBgColor = "background-color:#FE8E05;" }
//console.log(elemBgColor + " " + floatLeft) ;
//newElement.style.background-color = elemBgColor;
//newElement.style.float = floatLeft;
//newElement.draggable = 'true'; // 150
//newElement.onclick = "helloConsole()"
*/
</script>
</body></html>Thanks for your Help…