Question

我有2个连接的可排序列表。一个是手风琴里面的。当我尝试从手风琴中的可排序物品中拖动物品时，一旦我走出手风琴，助手就会消失。我可以删除其他连接的可排序项之一并显示该项目，但是在我拖动时它不会显示。如果我拖动并放下项目，手风琴也会向下滚动。

我可以拖延从我需要的任何一个列表中删除项目，它工作正常。如何将物品从手风琴内拖到外面时不会消失？

我已经尝试过收容选项，但似乎没有效果。

以下代码揭示了我从这些示例中获得的问题：http://jqueryui.com/demos/sortable/#connect-lists

我希望能够将手风琴中的项目拖动到可排序列表中。我实际上可以将它们放入列表中，但是当我将它们拖出手风琴时它们会消失。

<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>

Answer 1

在您的可排序电话中，您想使用以下选项：

helper: "clone", appendTo: "body", // or whatever element you want the helper clone to be attached to

这有两件事。首先它会复制被拖动的元素（辅助选项），然后它将该帮助器附加到指定的元素（appendTo选项）。

类似的问题：jQuery-Ui: Cannot drag object outside of an accordion

Answer 2

我有点迟了，我知道，但是我有两个可分类的手风琴有类似的问题，你可以在两个手风琴之间拖放物品。

因此，供将来参考：

我也无法让手风琴项目“走出”源手风琴，谷歌引导我解决这个问题。

我通过在sortable（）函数中添加 axis：undefined 解决了我的问题：

        $("#accordion1")
        .accordion({
            collapsible: true,
            header: "> div > h3",
            dropOnEmpty: true,
            autoHeight: false,
            active: false
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function() {
                stop1 = true;
            },
            connectWith: '.connectedSortable',
            helper: 'clone',
            axis: undefined
        });

现在手风琴项目可以被拖到任何地方。

Answer 3

粘贴你的代码样本，这样我们就知道你遗漏了什么......看来当你用鼠标按下时...然后你的手风琴发射了一个事件......我可能错了，但听起来像是这样。 ..所以试着看看jquery上的传播和stopPropagation。

jquery sortable不能被拉到手风琴之外

3 个答案: