Drag and Drop + Scroll

Question

I'm developing an 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

Answer 1

Use jQuery UI for drag and drop event, have a look below example, i think that will help you.

$(function() {
  $(".sidebar .draggable").draggable({
   grid: [ 20, 20 ],
   appendTo: '#droppable',
   containment: "window",
   cursor: 'move',
   revertDuration: 100,
   revert: 'invalid',
   helper: 'clone'
  });

  $("#droppable").droppable({
   accept: ".sidebar .draggable",
   drop: function (event, ui) {
    ui.helper.clone().appendTo('#droppable');
    $(".container .draggable").draggable({     
     containment:"#droppable"
    });    
   }
  }); 
 });

*{ box-sizing:border-box; margin:0; padding:0;}
    body {
       font-family: sans-serif;
  color: #414141;
  font-size: 14px;
  background:#f9f9f9;
    }
   
  .container{
  width:100%; 
  min-height:100vh; 
    position:relative;
  float:left;
    display:flex;
 }
 .sidebar{  
  width:200px;
    float:right;
  font-family: sans-serif;
  color: #414141;
  font-size: 14px;
 }
 
 .elements{ padding:5px; border:1px dashed #ccc; margin:5px 0; float:left;}
 
 .sidebar .elements{ width:100%; }

 .droppable-div{
  width:calc(100% - 250px); 
  flex:1;
  position:relative;
 }

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

  <div class="container">
   <div id="droppable" class="droppable-div">   
     
   </div>
      
      <div class="sidebar">
   <div class="elements draggable">In-Ear Audio Sport Gold</div>
   <div class="elements draggable">In-Ear Audio White</div>
   <div class="elements draggable">Notarum Black</div>
   <div class="elements draggable">Notarum Light Grey</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Notarum Light Grey</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Notarum Slim Black</div>
   <div class="elements draggable">Notarum Light Black</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Printer Coloris Express Series</div>
   <div class="elements draggable">Pictura Slim</div>
   <div class="elements draggable">In-Ear Audio Sport Gold</div>
   <div class="elements draggable">In-Ear Audio White</div>
   <div class="elements draggable">Notarum Black</div>
   <div class="elements draggable">Notarum Light Grey</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Notarum Light Grey</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Notarum Slim Black</div>
   <div class="elements draggable">Notarum Light Black</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Printer Coloris Express Series</div>
   <div class="elements draggable">Pictura Slim</div>
   <div class="elements draggable">In-Ear Audio Sport Gold</div>
   <div class="elements draggable">In-Ear Audio White</div>
   <div class="elements draggable">Notarum Black</div>
   <div class="elements draggable">Notarum Light Grey</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Notarum Light Grey</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Notarum Slim Black</div>
   <div class="elements draggable">Notarum Light Black</div>
   <div class="elements draggable">Notarum Slim Grey</div>
   <div class="elements draggable">Printer Coloris Express Series</div>
   <div class="elements draggable">Pictura Slim</div>
  </div> 
  </div>

Answer 2

that's a bug with jQuery ui, that has been fixed in 1.10.3 (check the Changelog Interactions->Draggable->first line).

It's supposed to stick the element you're dragging to your cursor even when you scroll and make it sorta fixed. When it already is fixed, it behaves in the opposite way.

You should consider updating your jquery ui version, since you're using 1.9.1.