我试图建立与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的）或身体有溢出什么行不通罚款。 如果您在块上点击拖动并尝试鼠标滚轮滚动，你不能......或者，如果你继续努力，你有时会。 （这不是明显与我的屏幕分辨率，但在小提琴代码，没有为#container的元素的滚动条）我假设这已经是与在那里我追加帮手的焦点。
因为我开始思考后，我开始追加助手到不同的位置。 随着#container的是我最感兴趣的领域，我可以追加助手那里得到的滚动工作得很好（取消注释// appendTo：“#container的”和注释掉appendTo：“身体”）。
然而，这引起了另一个问题。 如今，我将附加到#container的元素，我的块，不能当它被拖到父目录1文件夹，这使我相信，只是有些问题帮手看到。
果然，如果你没有用户帮手：“克隆”，你可以滚动精美。 这并不是因为我喜欢有有我克隆一个选项。 所以，我想谈谈你们。 我怎样才能解决我的问题，以及到底是怎么回事呢？ 有人有建议吗？ 我很乐意听到它。
这也是很好的注意，我试过设置可拖动的zIndex的和堆栈选项，但没有去。 我假设我不得不做出一个自定义的辅助函数，并使其意识到什么它目前正在拖过......但我希望有一个更简单的修补程序。
如果任何人有任何见解，我很乐意听到它。 谢谢！
