JS HTML5 Drag and Drop: Custom Dock Effect Jumping Around in Chrome

Perhaps I can expand my answer later, but for now:

Related questions: How to keep child elements from interfering with HTML5 dragover and drop events?'dragleave' of parent element fires when dragging over children elements

This is what happens:- you start dragging the operator- operator moves over the box, existing operators move along nicely- you move the operator over one of the existing operators- at this point the browser enters a kind of infinite loop thingy, because each time the elements move the position of the elements have to be updated again (because new events are triggered)

Since you need the click event on the existing operators you can't just set them to pointer-events: none; like in the related question, but you can add a class when you start dragging and apply this style to the operators while you're dragging.

Another solution would be to use a library, in the comments of an answer I found the library https://bensmithett.github.io/dragster/, I use draggable by shopify.

update

I wasn't able to find the exact term of this behavior, perhaps we could go with "cyclic case" or "undefined behaviour". See my examples:

:root {  /*colors by clrs.cc*/  --navy: #001f3f;  --blue: #0074D9;  --red: #FF4136;  font-family: sans-serif;}.animated {  transition: all .5s;}h2 {  color: var(--red);}div {  height: 160px;  width: 160px;  padding: 20px;  background: var(--blue);  margin-bottom: 20px;}.box1 {  border-right: 20px solid var(--navy);}.box1:hover {  border-right: 0px solid var(--navy);}.box2:hover {  border-radius: 100px;}

<div class="box1 animated">hover your mouse over my border on the right →</div><div class="box2 animated">hover your mouse over an edge of this box</div><h2>Warning, the following boxes have no animations, flashes are expected:</h2><div class="box1">hover your mouse over my border on the right →</div><div class="box2">hover your mouse over an edge of this box</div>