jquery - 拖放 + 滚动

Question

我正在开发一个应用程序，其中有两个带有可放置区域的列表和一个带有可拖动项目的侧面菜单。

当我滚动屏幕时，项目的位置困惑。

我试图在谷歌上寻找一些东西，最后得到了这个问题:jQuery draggable shows helper in wrong place after page scrolled

要么我没有正确应用他们的建议，要么它仍然不起作用。

我也尝试过应用此建议:http://jsfiddle.net/7AxXE/ 但我收到一条错误消息，指出draggable 不是函数。

在这里您可以找到我的应用程序示例

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

单击右上角的“确定”按钮，它会显示一个侧面菜单，当您拖动该项目并滚动页面时，您将看到该行为。

JQuery 版本:1.8.3

Answer 1

使用 jQuery UI 进行拖放事件，请看下面的示例，我认为这会对您有所帮助。

$(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>