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

Question

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

我现在正在尝试实现 jQuery Sortable，但没有运气。

目前我发现的示例要求您将手风琴的标题标签更改为“> div > h3”...然后可排序的处理程序是 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 > > ）。成员 div > h3/内容 div)。

示例中的标题选项详细说明了我所描述的结构。但是，如果您更改结构并省略容器（我相信 sortable 需要定义应该拖/放的内容），您的手风琴可能仍然可以工作，但现在不可排序。

这是一个正常工作示例。 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;
    }
});

如果您现在更改结构（保留“手风琴成员容器”以进行排序） ），它应该可以正常工作。在此示例中，我删除了 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;
    }
});

希望有所帮助。