当我从设置为溢出的容器div中拖动div时,我有一个不受欢迎的效果:滚动.
我找到了其他人遇到问题的例子,但我一直无法找到解决方案
会发生什么是滚动只是增加,我可以看到为什么这将是所需的行为,如果你想拖动到可滚动div内的目的地,但我希望能够把它带到滚动抓取之外.
我在div中有一个简单的UL,溢出设置为自动和固定高度.每个LI都可以通过jQuery拖动.问题是我无法将它们从div拖动(它们在拖动到边界时会消失).
我看过这个问题及其答案,但这里的解决方案对我来说似乎不起作用(设置滚动选项): jQuery Draggable和overflow问题
谢谢
我在页面左侧有一个可滚动列表(overflow:auto),页面右侧有几个dropable.我找到了一个解决方法,允许使用克隆将元素从列表拖动到容器,但是当元素被删除时,它会获得position:absolute,并且顶部和右侧位置与z-index一起添加到内联样式原来那里.附加的所有其他类都在副本中,只是在拖放之后,该元素无法再次拖动?
有没有办法做到这一点或删除克隆过程添加的内联样式?
显示问题的简化代码如下所示 - 您应该能够剪切并粘贴到页面并放入您的webroot进行测试.提前致谢.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
<script>
$(document).ready(function() {
var dropped = false;
$(".container").droppable({
drop: function(event, ui) {
dropped = true;
$.ui.ddmanager.current.cancelHelperRemoval = true;
ui.helper.appendTo(this);
}
});
$(".item").draggable({
revert: 'invalid',
helper: function(){
$copy = $(this).clone();
return $copy;
},
start: function(event, ui) {
dropped = false;
$(this).addClass("hide");
},
stop: function(event, ui) {
if (dropped==true) {
$(this).remove();
} else {
$(this).removeClass("hide"); …Run Code Online (Sandbox Code Playgroud) 我有一个设置了高度/宽度的可拖动 UL。这个可拖动列表可以被拖动到一个可排序的列表中。
我的代码:
$(".serviceMembersAvailable li").draggable({
helper: 'clone',
connectToSortable: '.serviceMembersAssigned'
});
$(".serviceMembersAssigned").sortable({
connectWith: '.serviceMembersAssigned',
placeholder: 'servicePlaceHolder',
update: function(event, ui) {
Services.memberAssigned($(ui.item));
}
});
Run Code Online (Sandbox Code Playgroud)
我的CSS:
ul.serviceMembersAvailable {
height: 160px;
overflow: auto;
}
Run Code Online (Sandbox Code Playgroud)
它工作正常,直到我通过在 CSS 中设置“溢出:自动”给可拖动列表一个滚动。当我拖动一个 LI 时,它包含在溢出中,所以我实际上无法将它移动到可排序的。
我找到了以下答案,但它用于将可拖动项目拖动到可放置项目中...但我想将可拖动项目拖动到可排序项目中。我认为这就是为什么他们的修复对我不起作用的原因。
jquery ui 可拖动元素在滚动 div 之外不可“拖动”
我从上面的链接中得到了 appendTo 部分,但它不会放入可排序的。
任何想法如何让这个工作?