jQuery UI:可拖动滚动问题 [英] jQuery UI: Draggable Scroll Issue
问题描述
我正在尝试使用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出了点问题.
当然，如果您不使用 helper:'clone'，则可以轻松滚动.这不是一个选择，因为我喜欢在那里存放克隆文件.所以我转向所有人.我该如何解决我的问题，究竟发生了什么?有人有建议吗?我很想听听.
还要注意，我已经尝试为可拖动对象设置了zIndex和stack选项，但没有成功.我假设我必须创建一个自定义的辅助函数，并使它知道当前正在拖动的内容...但是我希望有一个更简单的修复程序.
如果有人有任何见识，我很想听听.谢谢！
从小提琴中获取代码: 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:可拖动滚动问题
它是具有overflow: scroll
I'm trying to build a draggable/droppable folder-file view with jQuery UI, but I'm running into a problem with, what I believe is attributed to the helper. Here is my code:
The 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>
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
So the idea is... you drag one of the black blocks to the desired folder (Parent Directory 1, Parent Directory 2, Folder 1, etc.). That all seems to work fine.
What doesn't work fine is when the parent (#container) or body have an overflow. If you click on a block to drag and try to mousewheel scroll, you can't... or if you keep trying, you sometimes can. (It's not obvious with my screen resolution, but in the Fiddle code, there is a scrollbar for the #container element) I'm assuming this has something to do with the focus of where I'm appending the helper to.
Because I started thinking the latter, I started appending the helper to different locations. With #container being the area I'm most interested in, I can append the helper there and get the scroll to work just fine (uncomment //appendTo: '#container' and comment out the appendTo: 'body').
However, this introduces another problem. Now that I'm appending to the #container element, my block cannot be seen when it is dragged to the Parent Directory 1 folder, which lead me to believe that there is just something wrong with helper.
Sure enough, if you don't user helper: 'clone', you can scroll just beautifully. This is not an option because I like having my clone there. So I turn to y'all. How can I fix my problem, and what exactly is going on? Does anyone have any advice? I'd love to hear it.
It's also good to note that I've tried setting the zIndex and stack options for the draggable, but no go. I'm assuming I'll have to make a custom helper function, and make it aware of what it's currently being dragged over... but I'm hoping there's an easier fix.
If anyone has any insight, I'd love to hear it. Thanks!
Heres a code from a fiddle: 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');
}
});
Related to this question: jQuery UI: Draggable Scroll Issue
Its a working example of a dragable element inside a container with overflow: scroll
这篇关于jQuery UI:可拖动滚动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
