拖放+滚动

Question

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

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

我试图在Google上寻找东西，最终遇到了这个问题：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->第一行）。

即使滚动并使其固定排序，也应该将要拖动的元素粘贴到光标上。当它已经修复时，它的行为与之相反。

由于您使用的是1.9.1，因此应考虑更新jquery ui版本。