tom*_*ton 24 jquery-ui jquery-ui-draggable
使用jQuery UI,我试图创建一个带有两个可滚动容器的接口,每个容器包含许多可拖动元素.用户可以将元素从一个容器拖到另一个容器.
删除功能不是问题.删除后,元素将被分离并在其新父项下的正确位置重新创建.
我的问题是,当容器已position:relative;应用时,draggable元素无法显示在其容器外部,因此在拖动时,元素在移出容器边界时将消失.
此默认行为是有意义的,因为通常用户希望在其容器内拖动元素.作为一种解决方法,我假设解决方案是使用draggable属性'appendTo',我认为它会将元素移出容器外,但不幸的是,这似乎没有任何影响.
DOM :(每个视图都是可滚动的,每个容器都有位置:相对,并且可以保存所有元素所需的大小)
BODY
VIEW 1
CONTAINER
DRAGGABLE ELEMENTS
VIEW 2
CONTAINER
DRAGGABLE ELEMENTS
使用Javascript:
$('div.card').draggable({
appendTo: 'body',
scroll: false //stops scrolling container when moved outside boundaries
});
有关问题的简化说明,请参阅JSFiddle.我不想用可放置的代码来膨胀示例,所以这只是说明了拖动问题.http://jsfiddle.net/Em7Ak/
提前谢谢了.
Pau*_*aul 61
我不确定这是否能解决您的确切问题,但我遇到了这个问题,寻找相同的答案,这就是我找到的.
在.draggable()的选项中,传入helper:'clone'以自动克隆项目,以便可以将其拖出容器.并用appendTo:'body'它把它放在<body>标签的末尾.所以在我的情况下,我的选项看起来有点像这样,加入revert:'invalid'以使它在没有被丢弃的情况下回弹:
jQuery(".myselector").draggable({
helper: 'clone',
revert: 'invalid',
appendTo: 'body'
});
几个月前我遇到过类似的问题.
我的需要是能够使用其他人的一个大容器的自动滚动
这是我的问题,更多细节,JqueryUI,将元素拖动到包含大表的滚动可删除div的单元格中
我找到了一个解决方法.我们的想法是在helper构造回调期间将元素clone附加到可滚动容器,然后在1ms后使用setTimeout函数将帮助器附加到body.辅助位置必须映射到鼠标位置以避免偏移问题.
这里是我的解决方案(的jsfiddle似乎是失望吧,请稍后再试,如果没有代码在窗口中显示):http://jsfiddle.net/QvRjL/134/
$('[id^="drag-"]').each(function() {
$(this).draggable({
opacity: 0.7,
cursorAt: { top: 15, left: 50 },
appendTo: 'body',
containment: 'body',
scroll: true,
helper: function(){
//Hack to append the cartridge to the body (visible above others divs),
//but still belonging to the scrollable container
$('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>');
$("#clone").hide();
setTimeout(function(){
$('#clone').appendTo('body');
$("#clone").show();
},1);
return $("#clone");
}
});
});?
使用"克隆"助手并在拖动项目时隐藏该项目并在停止时再次显示该项目.
$(".removalbe-recom").draggable({
appendTo: "body",
helper: "clone",
revert: "invalid",
cursor: "move",
containment: "document",
zIndex: 10000,
scroll:false,
start: function (event, ui) {
$(this).hide();
},
stop: function (event, ui) {
$(this).show();
}
});
| 归档时间： |
|
| 查看次数： |
24511 次 |
| 最近记录： |