通过 Tag-it jqueryui 使用可排序

Question

我一直在使用来自 https://github.com/aehlke/tag-it（演示 - http://aehlke.github.com/tag-it/examples.html）的 tag-it 插件。

在这段代码中，有一个选项可以在另一个输入、textarea 等中显示输入的标签。第一个选项 -

        $('#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中有一个，但是由于上面的标签列表放在<li></li>之间，所以在提交php表单后，该值不会出现在mysql表中。

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

编辑：这里有一个类似 Tag-it 的插件，称为 tagit：http://webspirited.com/tagit/。如果标签被交换，这个插件有一个输入框的可排序，当在表单上提交时，它会按排序顺序出现。然而，它的缺点是它有自定义的主题滚轮主题，这些主题并不相似，甚至无法链接到 jQuery UI (jqueryui.com) 上的主题。

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

Answer 1

这是一个使用 tag-it 插件的解决方案，因为我知道您的引用中解释了您缺少的功能“...添加一个 sortable() 来更改 #singleFieldTags 中标签的顺序，不会更改#mySingleField 中标签的顺序"。

为了让“#mySingleField”反映新的排序顺序，我在 sortable() 的停止事件中添加了一个处理程序：

$('#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 （为单个输入字段添加了功能）