我将尝试使用 jQuery UI 构建可拖放的文件夹视图,但遇到了问题,我认为这与 helper 有关。以下是我的代码:
HTML 代码:
确实,如果您不使用helper:'clone',您可以完美地滚动。但这不是一个选择,因为我喜欢我的克隆品。所以我求助于大家。我该如何解决我的问题,到底发生了什么?有人有什么建议吗?我很想听听。
还值得注意的是,我尝试设置可拖动的zIndex和stack选项,但没有成功。我假设我将不得不制作一个自定义助手函数,并使其意识到它当前正在拖动的内容...但我希望有更简单的解决方法。
如果有人有任何见解,我很想听听。谢谢!
<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>
The 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');
}
});
});
The 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;
}
The Fiddle:jsFiddle
所以,这个想法是...你将一个黑色方块拖到所需的文件夹(Parent Directory 1、Parent Directory 2、Folder 1等)中。这一切似乎都很顺利。
不顺利的是当父级元素(#container)或body有溢出时。如果你点击一个方块进行拖动并尝试鼠标滚轮滚动,你不能...或者如果你一直尝试,有时候可以。(在我的屏幕分辨率下不明显,但在Fiddle代码中,#container元素有一个滚动条)。我认为这与我添加助手的焦点位置有关。
因为我开始考虑后者,所以我开始将助手附加到不同的位置。对于我最感兴趣的区域#container,我可以将助手附加在那里,并且可以很好地工作(取消注释//appendTo: '#container'并注释掉appendTo:'body')。
然而,这带来了另一个问题。现在我正在将内容附加到#container元素上时,当它被拖到Parent Directory 1文件夹中时,我的块就看不见了,这让我相信助手出了些问题。确实,如果您不使用helper:'clone',您可以完美地滚动。但这不是一个选择,因为我喜欢我的克隆品。所以我求助于大家。我该如何解决我的问题,到底发生了什么?有人有什么建议吗?我很想听听。
还值得注意的是,我尝试设置可拖动的zIndex和stack选项,但没有成功。我假设我将不得不制作一个自定义助手函数,并使其意识到它当前正在拖动的内容...但我希望有更简单的解决方法。
如果有人有任何见解,我很想听听。谢谢!