我怎样才能使这个标记系统可排序？答案

【问题标题】：How can I make this tagging system sortable?我怎样才能使这个标记系统可排序？
【发布时间】：2011-03-07 16:29:37
【问题描述】：

我在 SO:http://webspirited.com/tagit/?page=tagit 上找到了这个 jQuery 标记系统，我真的很喜欢它，但我需要能够拖放标签来对它们进行排序。

非常感谢您的帮助。

【问题讨论】：

【解决方案1】：

如果你的项目中包含了 jQuery UI，你应该可以调用：

$( "#tags" ).tagit().sortable();

编辑

第 102 行

在 tagit.js 中注释掉 self._removeTag();

        this.options.select = function(event, ui) {
            //self._removeTag();
            self._addTag(ui.item.value);
            return false;
        }

编辑

示例修改：

<html>
<head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <link href="http://webspirited.com/tagit/css/tagit-simple-blue.css" rel="stylesheet" type="text/css"/>
    <style>
        body, #demo2
        {
            height:150px;
        }
        #demo2
        {
            background-color:green;
        }
    </style>
</head>
<body>
    <ul id="demo2" name="demo2">
        <li>here</li>
        <li>are</li>
        <li>some</li>
        <li>initial</li>
        <li>tags</li>
    </ul>
    <input id="btnGetItems" type="button" value="GetVals" />
</body>

</html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://webspirited.com/tagit/js/tagit.js"></script>

<script type="text/javascript">

    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];


    $(function(){
        $('#demo2').tagit({tagSource: availableTags}).sortable();
        $('#btnGetItems').click(function(){
            getTags();
        });

    });

    function getTags()
    {
        var string = "Tags\r\n";
        string +="--------\r\n";
        $('#demo2 li.tagit-choice').each(function(){
            var $tmp = $(this).clone();
            $tmp.find('.tagit-close').remove();
            string += $tmp.html()+"\r\n";
        });
        alert(string);
    }

</script>

【讨论】：

谢谢，但是当我添加 .sortable() 时自动完成停止工作——它用选定的标签替换整个输入，而且 showTags 函数没有返回排序的标签，所以你的解决方案只是视觉上的对它们进行排序。
@emurad，修改后的示例见上文。我认为它解决了你所有的担忧。您只需对其进行样式设置以适合您的实现。
很好，但还有一个错误。当我从建议列表中选择一个项目时，它会替换最后一个标签而不是添加一个新标签。
@emurad，似乎是 tagit 插件的错误（在他们的网站上表现相同）。我会尝试联系作者/查找用户论坛。或者你可以在这里打开另一个问题。总的来说，我觉得这是一个单独的问题。
大家好，我是最初的开发者，我会处理提到的错误！