jQuery-Draggable | Lightweight Draggable jquery plugin | Plugin library

I'm developing and application where I have two lists with droppable areas and a side menu with draggable items.

When I scroll the screen the position of the item messes up.

I tried to look for something on google and ended up in this question: jQuery draggable shows helper in wrong place after page scrolled

Either I'm not applying what they suggest correctly or it's still not working.

I have tried applying this suggestion as well: http://jsfiddle.net/7AxXE/ but I get an error saying that draggable is not a function.

Here you can find an example of my application

https://denisorlandidesouza.outsystemscloud.com/Test/

Clicking on the Ok button on top right it shows a side menu, when you drag the item and scroll the page you will see the behaviour.

JQuery Version: 1.8.3

How to move draggable objects between source area and target area??
For example:
(Picture 1) Original location
(Picture 2) and then move some items
(Picture 3) my question is how to move the item between source area and target area

PS: I've tried a lot of possibilities like as below addresses

1. Revert a jQuery draggable object back to its original container on out event of droppable

2. http://devilmaycode.altervista.org/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-event-of-d/

3. http://api.jqueryui.com/draggable/#event-stop

4. Is there a way to revert the Jquery drag-drop draggable to its original position if it fails validation?
5. jQuery UI - Revert a jQuery draggable object back to its original?

picture 1 picture 2 picture 3

All Codes

In this code I used Jquery-draggable to set the tag. It worked, as you can see at https://jsbin.com/yekukar/edit?html,css,js

But I would like that when clicking on the line, (" in code for the angle"), the event "onmousemove" stopped marking the angle value in the place. I tried the event "onclick", but not it does not allow the measurement to take place smoothly at the clicked point.

Please, I need anyone suggestion.tks a lot !!!

SNIPPET HTML - CODIGO COMPLETO EM https://jsbin.com/yekukar/edit?html,css,js

So I have this jquery .draggable items that work inside the .droppable and the .droppable parent uses the jquery .panzoom. There is also a image for background witch is inside .canvasimg.

Here is a tree of my html structure:

I am using this plugin for the mind map the full code that deals with the dragging is in this link.

This is the html I am using in my case, constraining the mindmap in a custom dive while the example goes to full body.

HTML