jquery-ui - 使用带有 Tag-it jqueryui 的可排序

Question

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

在此代码中，有一个选项可以在另一个输入、文本区域等中显示输入的标签。第一个选项 -

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

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

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

#singleFieldTags 中添加和删除的所有标 checkout 现在 #mySingleField 。由于没有带有 tag-it 的内置可排序功能，因此添加 sortable()更改 #singleFieldTags 中标签的顺序，不会更改 #mySingleField 中标签的顺序.

第二个选项是纯文本，仅包含 #singleFieldTags如下:-

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

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

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

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

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

Answer 1

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

为了让“#mySingleField”反射(reflect)新的排序顺序，我向 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 (为单个输入字段添加了功能)