使用带Tag-it的sortable jqueryui

Question

我一直在使用演示( https://github.com/aehlke/tag-it - http://aehlke.github.com/tag-it/examples.html)中的tag-it插件。

在这段代码中，有一个在另一个输入、文本区等中显示输入标签的选项。

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

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

这里的id - #singleFieldTags是输入字段，它是一个类似于<ul的列表，id - #mySingleField显示“列表排序”标签，每个标签之间有逗号。

在#singleFieldTags中添加和删除的所有标记都会出现在#mySingleField中。由于没有带tag-it的内置可排序函数，因此添加sortable()来更改#singleFieldTags中标记的顺序并不会更改#mySingleField中标记的顺序。

第二个选项是仅包含#singleFieldTags的普通文本，如下所示:-

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

虽然在tag-it.js中有一个，但是在提交php表单后，这个值不会出现在mysql表中，因为上面的标签列表被放在<li></li>之间。

如何才能使标签可排序，并确保列表字段<ul中的标签排列与第一个选项中的相同，以显示在<textarea中？或者，第二种选择如何对单个字段<input中的标记进行排序，并使其能够通过表单提交？

编辑:有一个类似的插件，比如Tag--在这里叫做Tag：http://webspirited.com/tagit/。这个插件有一个带有输入框的可排序，这意味着如果标签被交换了，当提交到表单时，它将按排序的顺序出现。然而，缺点是它有自定义的更多主题，这些主题不相似，甚至不能链接到jQuery UI (jqueryui.com)上的主题。

但另一方面，tag-it插件(不是tagit)可以加载这些主题，但不提供可排序功能。

Answer 1

这里有一个使用tag-it插件的解决方案，因为我知道你的引用中解释了你缺少的功能"...adding a sortable() to change the order of tag in #singleFieldTags，not change the order of tag in #mySingleField“。

为了让"#mySingleField“反映新的排序顺序，我向sortable()的stop事件添加了一个处理程序：

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

和

$('#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
    }
});

这是一个jsfiddle that demonstrates the functionality (为单输入字段添加的功能)