Използване на sortable с Tag-it jqueryui

Използвам приставката tag-it от https://github.com/aehlke/tag-it (демо - http://aehlke.github.com/tag-it/examples.html).

В този код има опция за показване на въведените тагове в друго поле за въвеждане, текстово поле и т.н. Първа опция -

        $('#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 има , стойността не се появява в таблицата mysql след изпращане на php формуляра, тъй като горният списък с тагове е поставен между <li></li>.

Как е възможно етикетите да бъдат сортирани и да се гарантира, че същата подредба на етикети в полето на списъка <ul ще се показва в <textarea, както в първата опция? Или как може да работи втората опция за сортиране на етикети в рамките на едно поле <input и да се позволи изпращането му от формуляр?

РЕДАКТИРАНЕ: Тук има подобен плъгин като Tag-it, наречен tagit: http://webspirited.com/tagit/ . Този плъгин може да се сортира с поле за въвеждане, което означава, че етикетите са разменени и когато се изпрати във формуляр, ще се появи в реда на сортиране. Недостатъкът обаче е, че има персонализирани теми theeroller, те не са подобни и дори не могат да бъдат свързани с тези в jQuery UI (jqueryui.com).

Но от друга страна, приставката tag-it (не tagit) може да се зареди с тези теми, но не предоставя функцията за сортиране.


list input jquery-ui jquery-ui-sortable
person Javier Brooklyn    schedule 28.01.2013    source източник
comment
Themeroller (jqueryui.com/themeroller) е част от JQueryUI. Плъгинът Tag-it позволява зареждане на съвместима JQUeryUI тема. И така, какъв е проблемът да използвате втория плъгин, който сте намерили: Tag-it? Просто трябва да посочите темата на CSS файла, която използвате в момента в сайта си, към приставката tag-it или пропускам нещо?   -  person sdespont    schedule 09.02.2013
comment
Опитах link href да използвам тези (jqueryui.com/themeroller) теми, но те не работят с tag-it as tag-има предварително дефинирани теми в конкретна папка, когато го изтегляте, css файлът в тези теми е много различни от тези в jqueryui.com/themeroller и те дори не изглеждат толкова добре, колкото оригиналния jQuery themeroller .   -  person Javier Brooklyn    schedule 09.02.2013

Отговори (1)


arrow_upward
4
arrow_downward

Ето решение, което използва приставката tag-it, защото разбирам, че липсващата ви функционалност е обяснена във вашия цитат „... добавянето на sortable() за промяна на реда на таговете в #singleFieldTags, не променя реда от тагове в #mySingleField".

За да има "#mySingleField" да отразява новия ред на сортиране, добавям манипулатор към събитието stop на 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, който демонстрира функционалността (добавена функционалност за едно поле за въвеждане)

person marty    schedule 10.02.2013
comment
Да, това работи добре, ще бъде ли възможно да има тази функция само за едно поле за въвеждане? Сигурен съм, че няма да е толкова трудно за вас сега, когато сте решили сортирането на маркери за 2 полета, защото изглежда, че приставката ще бъде непълна или предубедена само към 2 полета, ако предположим, че в даден момент искам да превключа към обикновено въвеждане и установете, че тези тагове не се сортират. - person Javier Brooklyn; 10.02.2013
comment
@Javier, да, беше ясно, добавих сортирането за обикновеното поле за въвеждане към jsfiddle. - person marty; 11.02.2013
comment
страхотно! Благодаря за помощта! - person Javier Brooklyn; 11.02.2013