javascript - 如何使该标签系统可分类？

我发现SO上提到了这个jQuery标记系统:http://webspirited.com/tagit/?page=tagit，我真的很喜欢它，但是我需要能够拖放标记以对其进行排序。

您的帮助将不胜感激。

最佳答案

如果您的项目中包含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>

TAGIT

javascript - 如何使该标签系统可分类？