jQuery sortable不能被拖动到手风琴外面 [英] jquery sortable cannot be dragged outside of accordion
问题描述
我有2个已连接的可排序列表.一个在手风琴内.当我尝试从手风琴中的可排序项中拖动项目时，只要我离开手风琴，助手就会消失.我可以放到其他已连接的可排序对象之一中，该项目将显示，但是在拖动时它不会显示.如果我拖动并向下拖动，手风琴也会向下滚动.
I have 2 connected sortable lists. One is inside an accordion. When I try to drag items from the sortable in the accordion, the helper disappears as soon as I get outside of the accordion. I can drop to one of the other connected sortables and the item will display, but it just doesn't display while I'm dragging. The accordion also scrolls down if I drag and item down.
我可以拖动&从我需要的其他任何一个列表中删除项目，效果很好.从手风琴内部向外部拖动物品时如何使它们不消失?
I can drag & drop items from either of the other list wherever I need and it works fine. How can I make items not disappear while dragging them from inside an accordion to the outside of it?
我已经尝试了遏制选项，但这似乎没有效果.
I've already tried the containment option but that seems to have no effect.
以下代码暴露了我从以下示例中解决的问题: http://jqueryui.com/demos/sortable/#connect-lists
Here's code to expose the problem that I've taken from these examples: http://jqueryui.com/demos/sortable/#connect-lists
我希望能够将手风琴中的项目拖到可排序列表中.我实际上可以将它们放入列表中，但是当我将它们拖到手风琴外面时它们会消失.
I want to be able to drag items from the accordion into the sortable list. I can actually drop them into the list, but they disappear while I'm dragging them outside of the accordion.
<html>
<head>
<title>Accordion Sortable Failure Test</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
$(".sortable").sortable({connectWith: ".sortable"});
$("#accordion").accordion({ header: "h3" });
});
</script>
</head>
<body>
<h2>Sortable</h2>
<ul class="sortable">
<li>Row 1</li>
<li>Row 2</li>
</ul>
<h2>Accordion</h2>
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<ul class="sortable">
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
</ul>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</body>
</html>
推荐答案
在可排序的呼叫中，您想使用以下选项:
In your sortable call you want to use the following options:
helper: "clone",
appendTo: "body", // or whatever element you want the helper clone to be attached to
helper: "clone",
appendTo: "body", // or whatever element you want the helper clone to be attached to
这有两件事.首先，它会复制要拖动的元素(helper选项)，其次将该helper附加到指定的元素(appendTo选项).
This does two things. First it makes a copy of the element being dragged (helper option), second it attaches that helper to the specified element (appendTo option).
此处有类似问题: jQuery-Ui:无法将对象拖动到手风琴之外
这篇关于jQuery sortable不能被拖动到手风琴外面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
