drag.js | micro javascript utility for ui drag behavior | Widget library

You have the data-x/data-y attribute still attached to the draggable even after reset. Try removing that and it should work fine. I'm quite not sure why you need setTimeout to remove the style attribute though. I have added an extra statement to remove data-x and data-y. Maybe you can clean that up to a single statement

These modifications of the OP's code will do the following when the dragged div is dropped:

1. make a clone of the dragged div and add it to the

2. move the dragged div back to its starting position

You could extract the bounds from the FreeDraw by listening to the markers event to create a polygon or other map object using leaflet enabled with dragging. See working example below.

You should consider whether you would like to disable the FreeDraw after this, using the option leaveModeAfterCreate:true as the user may get additional polygons when dragging

With that code you can remove the "cancel" button on all shapes:

npm install jquery OR npm update to remove the second error.

Wrong Event

Looking at the source of SortableJS it seems that the event you want to stop from bubbling is not the click event, but rather the mouseup event.

The "Stuck" Drag Item Problem

As indicated in the comments of this answer, stopping propagation on the mouseup event causes an issue where the drag is started unintentionally, and the sortable-item becomes "stuck" to the pointer.

It seems that the "drag initiation" is triggered by either pointerdown, mousedown, or touchstart events, depending on the device.

It can be safely assumed that the pointerdown event is the one that does the triggering according to caniuse.com.

The Solution

So the actual way to solve this is to use a @pointerdown.stop event binding to trigger your toggleTree method without triggering either selection of the sortable-item, or the unintentional drag initiation.

I will share a circle drag example on SVG, I hope it works for you

It turns out that there was a bug in my server program.

I was sending a 'Connection: Keep-Alive' header, and then closing the connection after sending the file.

I now send a 'Connection: Close' header, and everything works perfectly.

Sorry about that.

The this you see in the debugger is the actual this value; the this you see in the source view is the source-mapped version of n, and the value of n isn’t what you want it to be.

You used an arrow function, so you got lexical this. That’s what arrow functions do. To access the this from call time (what’s generally intended when adding methods to a prototype), use a non-arrow function: