如何使此标记系统可排序?

时间:2011-03-07 16:29:38

标签: javascript jquery jquery-ui tagging

我在SO上发现了这个jQuery标记系统:http://webspirited.com/tagit/?page=tagit我非常喜欢它,但我需要能够拖放标记来对它们进行排序。

非常感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

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