拖放+滚动

Question

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

当我滚动屏幕时，项目的位置会混乱。

我试图在谷歌上寻找一些东西，结果出现了这个问题：jQuery draggable shows helper in wrong place after page scrolled

要么我没有正确应用他们的建议，要么仍然无法正常工作。

我也尝试过应用这个建议：http://jsfiddle.net/7AxXE/but I get an error saying that draggable is not a function.

在这里你可以找到我的应用示例

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>

Answer 2

这是 jQuery ui 的一个错误，已在 1.10.3 中修复（检查Changelog Interactions->Draggable->第一行）。

它应该将您拖动的元素粘贴到光标上，即使您滚动并使其固定。当它已经被修复时，它会以相反的方式运行。

您应该考虑更新您的 jquery ui 版本，因为您使用的是 1.9.1。