Drag and drop + Scroll

Question

I am developing an application one I have 2 lists with droppable areas and a side menu with draggable items.

When I use scroll the position of the item I’m dragging is changed by adding scroll movement.

I tried to apply what I found to this topic: https://stackoverflow.com/questions/5791886/jquery-draggable-shows-helper-in-wrong-place-after-page-scrolled but either I’m applying wrong or it’s not working at all.

I tried that one too: http://jsfiddle.net/7AxXE/ but an error is shown saying that "draggable is not a Function".

Here you can access an example of my application and simulate the error:

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

Clicking the "Ok" button at the top right will show a side menu, when dragging the item to the main area and using the scroll you will see the behavior.

Answer 1

Your jsfindle is working, the only problem is that you have not put any event to show that drag and drop works visually.

I believe you need something like this:

$('.item').draggable({
    cursor: 'pointer',
    snap: '#itens',
    revert: 'invalid',
    scroll: false,
});

$('#itens2').droppable({
    accept: '.item',
    drop: function(e, ui) {
        $(this).append(ui.draggable.css('position','static'));
    }
});

$('#itens').droppable({
    accept: '.item',
    drop: function(e, ui) {
        $(this).append(ui.draggable.css('position','static'));
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<ul id="itens" style="width: 100px; height: 100px; border:1px solid black;">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li class="item">Item 4</li>
  <li class="item">Item 5</li>
</ul>

<ul id="itens2" style="width: 100px; height: 100px; border:1px solid black;">
</ul>