Home/ Questions/Q 4032778
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T11:45:51+00:00

I found this jQuery tagging system mentioned on SO: http://webspirited.com/tagit/?page=tagit and I really like

  • 0

I found this jQuery tagging system mentioned on SO: http://webspirited.com/tagit/?page=tagit and I really like it but I need to be able to drag and drop the tags to sort them.

Your help would be greatly appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you’ve got jQuery UI included in your project, you should be able to call:

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

    EDIT

    Line 102

    Comment out self._removeTag(); in tagit.js

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

    EDIT

    Example Revised:

    <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>
    • 0