隐藏在容器外的可拖动元素
Posted
技术标签:
【中文标题】隐藏在容器外的可拖动元素【英文标题】：Draggable element hidden outside container 【发布时间】：2012-12-18 19:04:33 【问题描述】：使用 jQuery UI，我正在尝试创建一个带有两个可滚动容器的界面，每个容器都包含许多可拖动元素。用户可以将元素从一个容器拖到另一个容器。
丢弃功能不是问题。删除后，该元素将分离并在其新父项下的正确位置重新创建。
我的问题是当容器应用position:relative;时，可拖动元素无法显示在其容器外，所以在拖动时，当元素移出容器边界时，元素会消失。
这种默认行为是有意义的，因为通常用户希望在其容器内拖动一个元素。作为一种解决方法，我假设解决方案是使用可拖动属性“appendTo”，我认为这会将元素移到其容器之外，但不幸的是这似乎没有任何效果。
DOM：（每个视图都是可滚动的，每个容器都有 position:relative 并且与容纳所有元素所需的大小一样大）
BODY
VIEW 1
CONTAINER
DRAGGABLE ELEMENTS
VIEW 2
CONTAINER
DRAGGABLE ELEMENTS
$('div.card').draggable(
appendTo: 'body',
scroll: false //stops scrolling container when moved outside boundaries
);
请参阅 JSFiddle 以获得对该问题的简化说明。我不想用可放置的代码使示例变得臃肿，所以这只是说明了拖动问题。 http://jsfiddle.net/Em7Ak/
非常感谢。
【问题讨论】：
【参考方案1】：我不确定这是否能解决您的确切问题，但我遇到了这个问题以寻找相同的答案，这就是我发现的。
在 .draggable() 的选项中，传入 helper:'clone' 以自动克隆项目，以便将其拖出容器。并使用appendTo:'body' 将其放在<body> 标记的末尾。所以在我的情况下，我的选项看起来有点像这样，添加 revert:'invalid' 以使它在它没有被丢弃在某个有效的地方时弹回：
jQuery(".myselector").draggable(
helper: 'clone',
revert: 'invalid',
appendTo: 'body'
);
【讨论】：
helper: 'clone' 对我有用，适用于可拖动项目在其父边界外拖动时不可见的情况。 Katat 听起来您缺少解决方案的 appendTo: 'body' 部分 在我的情况下，此配置还有一个问题，克隆的元素具有与原始元素一样的绝对定位，因此它位于页面顶部，因为可拖动元素位于页面中间其父 div 的顶部 :-)我想我将不得不寻找克隆增强功能...... 请注意，就我而言，我也必须添加z-index；其他人可能有类似的问题。【参考方案2】：
使用“克隆”助手并在拖动项目时隐藏它并在停止时再次显示它。
$(".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();
);
【讨论】：
【参考方案3】：几个月前我也遇到过类似的问题。
我的需要是能够从其他人那里使用一个大容器的自动滚动
这是我的问题，了解更多详情，JqueryUI, drag elements into cells of a scrolling dropable div containing large table
我找到了解决方法。想法是在帮助器构造回调期间将元素克隆附加到可滚动容器，然后在 1ms 后使用 setTimeout 函数将帮助器附加到主体。辅助位置必须映射到鼠标位置以避免偏移问题。
这是我的解决方案（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");
);
);
【讨论】：
【参考方案4】：添加位置：绝对卡片样式：
div.card
position:absolute;
width:100px; height:50px;
border:1px black solid;
background-color:orange;
text-align:center; vertical-align:middle;
【讨论】：
谢谢，在我将 position:relative 应用于每个容器之前，此方法有效。我必须使用此属性，因为用户可以加载模式。我已经相应地改变了我的问题和 JSFiddle。以上是关于隐藏在容器外的可拖动元素的主要内容，如果未能解决你的问题，请参考以下文章