JQuery UI 可排序按钮集答案

【问题标题】：JQuery UI Sortable ButtonsetJQuery UI 可排序按钮集
【发布时间】：2011-11-18 22:42:03
【问题描述】：

我正在尝试结合 jQuery 可排序交互和按钮集小部件来制作可排序按钮集。这是一个尝试这样做的 jfiddle：http://jsfiddle.net/HK7rX/3/。

第一个只是在同一个 div 上调用 buttonset 和 sortable。它有点工作，但是当您尝试移动按钮时，它会使列表跳来跳去，并且很难将按钮移动到第一个或最后一个位置。

然后我尝试在每个 li 中创建一个带有按钮的 ul，但可排序部分根本不起作用。我认为这与覆盖对可排序事件的调用的按钮单击事件有关。

然后我尝试了上面相同的方法，但失败得更糟。

第一次尝试效果“最好”，但仍然存在一些问题。关于如何混合按钮集（使按钮充当单选按钮）并能够以不同的顺序移动它们的任何想法？

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

从您的第一个示例开始，here 的开始是合理的。我所做的只是将所有无线电输入/标签对放在它们自己的浮动分区中，这样可以使排序顺利。

现在你需要做的就是整理按钮上的圆角:)

【讨论】：

效果很好。我只是想让它工作，因此在 div 元素上使用内联样式，由于某种原因，如果你在内部 div 上指定内联浮动样式而不是在外部 css 文件中，你会得到时髦的行为。看看：jsfiddle.net/7nZRM
多么奇怪！ CSS 有时让我感到困惑 :)

【解决方案2】：

对于它的价值，因为我在试图找到一个类似的明显未解决的问题时遇到了这个问题 - 如何整理圆角 - 这就是我想出的。我确信有一种更有效的方法可以做到这一点，但这很有效。

$("#radioset").sortable({
    stop:function(event, ui) {
        $("#radioset .ui-corner-right").removeClass("ui-corner-right");
        $("#radioset .ui-corner-left").removeClass("ui-corner-left");
        $("#radioset label:first").addClass("ui-corner-left");
        $("#radioset label:last").addClass("ui-corner-right");
    }
});

谢谢史蒂夫·威尔克斯，因为您的回答回答了我试图解决的另一部分问题：)

【讨论】：