Question

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

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

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

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

此处，ID - #singleFieldTags是输入字段，其中包含<ul之类的列表，而id - #mySingleField则显示“list-ordered”标记，每个标记之间都有逗号。

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

第二个选项是仅包含#singleFieldTags的平原，如下所示： -

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

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

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

编辑：像Tag这样的插件名为tagit：http://webspirited.com/tagit/。此插件可以使用输入框进行排序，这意味着标签是否已互换，并且在表单上提交时，它将按排序顺序显示。然而，缺点是它具有自定义的themeroller主题，这些主题并不相似，甚至无法链接到jQuery UI（jqueryui.com）上的主题。

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

Answer 1

这是一个使用tag-it插件的解决方案，因为我知道你的缺失功能在你的引用中解释为“ ...添加一个sortable（）来改变#singleFieldTags中标签的顺序，不是更改#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 （为单个输入字段添加了功能）

使用Tag-it jqueryui进行排序

1 个答案: