Question

我目前正在开发一个Web应用程序，它在jScrollPane中具有动态更新的手风琴。

我现在正试图在没有运气的情况下实现jQuery Sortable。

目前我发现的示例要求您将手风琴的标题标签更改为“＆gt; div＆gt; h3”...其中sortable的处理程序是h3标签。

当保留手风琴的原始标题并尝试进行可排序的工作时，我似乎无法找到任何解决方案。

在项目的这个方面，我无法改变手风琴的标题，因为很多功能都会被破坏，需要进行大量的调整。

有没有人对这项工作有任何想法？

谢谢，

大卫

编辑：这是我尝试工作的示例代码。我删除了手风琴中的标题选项，并使用可排序处理程序和点击操作。

    var stop = false;
    $("#accordion h3").click(function(event) {
        if (stop) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
        }
    });

    $("#accordion").accordion().sortable({
        axis: "y",
        handle: "h3",
        stop: function() {
            stop = true;
        }
    });

Answer 1

您的代码（包括您在jsfiddle.net链接中的内容）与jQuery网站上的标准示例之间存在两个主要差异。首先（可能是绊倒你），每个手风琴“成员”都包含在自己的div中。也就是说，如果你有一个指定为手风琴容器的div，那么h3，div，h3，div ......，你需要手风琴容器和每个成员的容器（所以手风琴div＆gt;成员divs＆gt; h3 / content div）。

示例中的标题选项拼写出我描述的结构。但是，如果您更改结构并省略容器（我认为sortable需要定义应拖放的内容），您的手风琴可能仍然有效但现在不可排序。

这是一个normal working example。 HTML：

<div id="accordion">
    <div>
        <h3><a href="#">Section 1</a></h3>
        <div>
            <p>
                Text.
            </p>
        </div>
    </div>
    <div>
        <h3><a href="#">Section 2</a></h3>
        <div>
            <p>
                Text.
            </p>
        </div>
    </div>
    <div>
        <h3><a href="#">Section 3</a></h3>
        <div>
            <p>
                Text.
            </p>
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
            </ul>
        </div>
    </div>
    <div>
        <h3><a href="#">Section 4</a></h3>
        <div>
            <p>
                Text.
            </p>
            <p>
                Text.
            </p>
        </div>
    </div>
</div>

JS：

var stop = false;
$("#accordion h3").click(function(event) {
    if (stop) {
        event.stopImmediatePropagation();
        event.preventDefault();
        stop = false;
    }
});
$("#accordion").accordion({
    header: "> div > h3"
    })
    .sortable({
    axis: "y",
    handle: "h3",
    stop: function() {
        stop = true;
    }
});

如果您现在change the structure（留在“手风琴成员容器”中进行排序），它应该可以正常工作。在这个例子中，我删除了h3标签，并在手风琴触发元素内部制作了锚点。我还给触发器元素一个独特的“句柄”类，以区别于成员中的任何锚点（毫无疑问，使用jQuery选择器来做这个更好的方法，但我生锈和懒惰）：

<div id="accordion">
    <div>
        <a href="#" class="handle">Section 1</a>
        <div>
            <p>
                Text...
            </p>
        </div>
    </div>
    ...
</div>

然后我改变了JS以反映这一点。手风琴设置指定路径（通过所需的div容器）到锚标签。可排序设置使用我们特殊的“a.handle”，因此只有“handle”类锚标记将作为可排序的句柄：

var stop = false;
$("#accordion h3").click(function(event) {
    if (stop) {
        event.stopImmediatePropagation();
        event.preventDefault();
        stop = false;
    }
});
$("#accordion").accordion({
    header: "> div > a"
    })
    .sortable({
    axis: "y",
    handle: "a.handle",
    stop: function() {
        stop = true;
    }
});

希望有所帮助。

没有标准处理程序的jQuery可排序手风琴

1 个答案: