How to STOP Drag-n-Drop Finicky behavior ?

[VernonM]

Hello & Thanks : Working-Example here : https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder-1-Note-4-Frets-FORUM.html The working-example is VERY finicky , in that when Dragging an item , the Cursor keeps loosing the item , as you can view at link above , Forcing me to keep going back and Grabbing .item again & again . Else I have to Drag at a sloth's pace . Source-Code :

Guitar-Scales-and-Boxes-Builder-1-Note-4-Frets-FORUM.html
body {
margin: 20px;
background-color: #FFFFFF;
}
.flex-container {
display: flex;
}

.flex-container > div {
font-size: 20px;
}
#container {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
counter-reset: itemCount;
}
.item {
display: inline-block;
border-radius: 50%;
touch-action: none;
user-select: none;
counter-increment: itemCount;
content: 'count' + itemCount;
width: 32px;
height: 32px;
background-color: #F5F5F5; // whitesmoke
font-family: Arial, Helvetica, sans-serif;
text-align:center;
font-size:28px;
z-index: 8;
}

.flatOne , sharpOne , naturalOne { background-color: #DCDCDC;
z-index: 5;
}

#itemContainer { }
#tableContainer { }
#fretboardContainer { background-color: #DCDCDC;
}
tbody { background-color:#636363;
}
#tbodyId { background-color:#636363;
}
.item:active {
opacity: .75;
}
.item:hover {
cursor: pointer;
}

X:
Y:

b

1