inc*_*nez 5 jquery jquery-ui positioning mousewheel jquery-ui-draggable
我正在尝试使用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文件夹时看不到我的块，这使我相信helper出了点问题。
果然，如果您没有用户帮助器：'clone'，则可以漂亮地滚动。这不是一个选择，因为我喜欢在那里存放克隆文件。所以我转向所有人。如何解决我的问题，究竟发生了什么？有人有建议吗？我很想听听。
还需要注意的是，我尝试为可拖动对象设置zIndex和堆栈选项，但没有成功。我假设我必须创建一个自定义的辅助函数，并使它知道当前正在拖动的内容...但是我希望有一个更简单的修复方法。
如果有人有任何见识，我很想听听。谢谢！
这是小提琴的代码：http ://jsfiddle.net/crowjonah/Fr7u8/3/
HTML：
<table>
<tr class="drag_me">
<td>drag me</td>
</tr>
<tr class="drag_me">
<td>drag me</td>
</tr>
<tr class="drag_me">
<td>drag me</td>
</tr>
<tr class="drag_me">
<td>drag me</td>
</tr>
</table>
<div class="upper"></div>
<div class="drop_area">
<ul>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
</ul>
</div>
<div class="lower"></div>
jQuery：
$('.drag_me').draggable({
helper: 'clone',
scroll: 'true',
refreshPositions: true
});
$('.drop_on_me').droppable({
accept: '.drag_me',
activeClass: 'active',
hoverClass: 'hover',
tolerance: 'pointer'
});
$('.upper').droppable({
over: function(event, ui){
$('.drop_area').autoscroll({
direction: 'up',
step: 150,
scroll: true
});
},
out: function(event, ui){
$('.drop_area').autoscroll('destroy');
}
});
$('.lower').droppable({
over: function(event, ui){
$('.drop_area').autoscroll({
direction: 'down',
step: 150,
scroll: true
});
},
out: function(event, ui){
$('.drop_area').autoscroll('destroy');
}
});
与此问题相关：jQuery UI: Draggable Scroll Issue
它是容器内可拖动元素的工作示例overflow: scroll
| 归档时间： |
|
| 查看次数： |
16948 次 |
| 最近记录： |