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>