我正在尝试使用 jQuery UI 构建一个可拖动/可放置的文件夹文件视图，但我遇到了一个问题，我认为这归因于助手。这是我的代码：
的HTML
<body>
<div id="topContainer">
<span>Parent Directory 1</span>
</div>
<span id="topFolder" class="folder">
<div class="drop">
</div>
</span>
<hr />
<div id="container" class="container">
<div class="dropzone">
<span>Parent Directory 2</span>
</div>
<div id="cont1" class="container">
<div class="dropzone">
<span>Folder 1</span>
</div>
<span id="folder1" class="folder">
<div class="drop">
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
</div>
</span>
</div>
<div id="cont2" class="container">
<div class="dropzone">
<span>Folder 2</span>
</div>
<span id="folder2" class="folder">
<div class="drop">
</div>
</span>
</div>
<div id="cont3" class="container">
<div class="dropzone">
<span>Folder 3</span>
</div>
<span id="folder3" class="folder">
<div class="drop">
</div>
</span>
</div>
<span id="mainFolder" class="folder">
<div class="drop">
<div class="drag"> </div>
</div>
</span>
</div>
</body>
jQuery
$(document).ready(function () {
var opts = {
helper: 'clone',
appendTo: 'body'
//appendTo: '#container'
};
$('div.drag').each(function () {
$(this).draggable(opts);
});
$('.dropzone, #topContainer').droppable({
drop: function (e, ui) {
var clone = $(ui.draggable).clone();
clone.draggable(opts);
$(this).siblings('.folder').children('.drop').append(clone);
$(this).removeClass('over');
},
over: function (e, ui) {
$(this).addClass('over');
},
out: function (e, ui) {
$(this).removeClass('over');
}
});
});
CSS
.dropzone {
height: 300px;
width: 100px;
border: 1px solid black;
}
.drag {
clear: both;
height: 50px;
width: 80px;
background-color: black;
position: relative;
cursor: pointer;
}
#topContainer, .dropzone {
height: 50px;
width: 300px;
border: 2px solid black;
text-align: center;
}
.folder .drag {
margin: 5px;
}
.container {
border: 2px solid blue;
margin: 10px;
}
.over {
background-color: yellow;
}
#container {
width: 800px;
height: 600px;
overflow-y: scroll;
border-color: red;
position: relative;
}
小提琴：jsFiddle
所以这个想法是......您将其中一个黑色块拖动到所需的文件夹（父目录 1、父目录 2、文件夹 1 等）。这一切似乎都很好。
当父级（#container）或主体溢出时，不能正常工作。如果您单击要拖动的块并尝试使用鼠标滚轮滚动，则不能……或者如果您继续尝试，有时可以。（我的屏幕分辨率并不明显，但在 Fiddle 代码中，#container 元素有一个滚动条）我假设这与我将助手附加到的焦点有关。
因为我开始考虑后者，所以我开始将助手附加到不同的位置。#container 是我最感兴趣的区域，我可以在此处附加帮助程序并使滚动正常工作（取消注释 //appendTo: '#container' 并注释掉 appendTo: 'body'）。
然而，这引入了另一个问题。现在我要附加到 #container 元素，当我的块被拖到Parent Directory 1文件夹时看不到它，这让我相信助手有问题。
果然，如果你不使用 user helper: 'clone'，你可以漂亮地滚动。这不是一个选择，因为我喜欢在那里有我的克隆。所以我转向你们。我该如何解决我的问题，到底发生了什么？有人有建议吗？我很想听听。
还需要注意的是，我已经尝试为可拖动设置 zIndex 和堆栈选项，但没有成功。我假设我必须制作一个自定义帮助函数，并让它知道它当前被拖过什么......但我希望有一个更简单的修复。
如果有人有任何见解，我很想听听。谢谢！