Question

I’ve been using the tag-it plugin from https://github.com/aehlke/tag-it (demo – http://aehlke.github.com/tag-it/examples.html).

In this code there is an option to display the inputted tags in another input, textarea etc. First option –

        $('#singleFieldTags').tagit({
            availableTags: sampleTags,

            singleField: true,
            singleFieldNode: $('#mySingleField')
        });

Here the id – #singleFieldTags is the inputting field which is a list like <ul and id – #mySingleField displays the ‘list-ordered’ tags with commas between each.

All the tags that are added and removed in the #singleFieldTags appear in the #mySingleField. Since there is no built-it sortable function with tag-it, adding a sortable() to change the order of tags in #singleFieldTags, does not change the order of tags in #mySingleField.

The second option is a plain with only #singleFieldTags as follows :-

        $('#singleFieldTags').tagit({
            availableTags: sampleTags,
        });

Although in tag-it.js there is a , the value does not appear in the mysql table after submitting the php form as the above list of tags is placed between <li></li>.

How is it possible to make the tags sortable and ensure that the same arrangement of tags in the list field <ul to be displayed in the <textarea as in First Option? Or How can the second option of sorting tags within a single field <input work and enabling it to be submitted by a form?

EDIT: There is a similar plugin like Tag-it called tagit here: http://webspirited.com/tagit/ . This plugin has sortable with an input box meaning if the tags were interchanged, and when submitted on form it would appear in the order of the sort. However, the disadvantage being that it has custom themeroller themes these are not similar and cannot even be linked to the ones at jQuery UI (jqueryui.com).

But on the other hand, the tag-it plugin (not tagit), can be loaded with these themes but does not provide the sortable function.

Answer 1

Here’s a solution that uses the tag-it plugin, because I understand that your missing functionality is explained in your quote “…adding a sortable() to change the order of tags in #singleFieldTags, does not change the order of tags in #mySingleField“.

In order to have “#mySingleField” reflect the new sort order, I’m adding a handler to the stop event of sortable():

$('#singleFieldTags').sortable({
    stop: function(event,ui) {
        $('#mySingleField').val(
            $(".tagit-label",$(this))
                .clone()
                .text(function(index,text){ return (index == 0) ? text : "," + text; })
                .text()
        );
    }
});

and

$('#singleFieldTags2').siblings(".tagit").sortable({
    stop: function(event,ui) {
        $('#singleFieldTags2').val(
            $(".tagit-label",$(this))
                .clone()
                .text(function(index,text){ return (index == 0) ? text : "," + text; })
                .text()
        );
        console.log( $('#singleFieldTags2').val() );        // just for reference
    }
});

Here is a jsfiddle that demonstrates the functionality
(added functionality for single input field)