jquery sortable不能被拖到手风琴之外答案

【问题标题】：jquery sortable cannot be dragged outside of accordionjquery sortable不能被拖到手风琴之外
【发布时间】：2010-01-11 06:51:26
【问题描述】：

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

【问题讨论】：

标签： jquery jquery-ui accordion jquery-ui-sortable

【解决方案1】：

在您的可排序调用中，您希望使用以下选项：

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

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

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

【讨论】：

【解决方案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
        });

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

【讨论】：

您的 .sortable 函数的开头是 axis: "y"，结尾是 axis: undefined。你确定这是正确的吗？

【解决方案3】：

粘贴您的代码示例，以便我们知道您遗漏了什么...似乎当您按下鼠标时...然后您的手风琴触发一个事件...我可能是错的，但听起来像。 .. 所以试着看看 jquery 上的传播和 stopPropagation。

【讨论】：

我添加了源代码。您能否建议或链接到如何确定哪个元素上的哪个事件可能已经停止传播？
请看这个：jqueryui.com/demos/accordion/#sortable 如果您希望手风琴本身可以排序，应该可以帮助您解决问题。在可排序的 ui 上，你应该看看 helper。例如helper:'clone' 所以添加以下 `$(".sortable").sortable({connectWith: ".sortable",helper: 'clone'});` 这将在触发拖动时显示您正在拖动的元素的克隆然后在完成销毁克隆后，将原件保留在放置目标上