このタグ付けシステムをソート可能にするにはどうすればよいですか？

SO：http://webspirited.com/tagit/?page=tagitに記載されているこのjQueryタグシステムが見つかりました。本当に好きですが、タグをドラッグアンドドロップして並べ替える必要があります。このタグ付けシステムをソート可能にするにはどうすればよいですか？

ご協力いただき誠にありがとうございます。

出典

2011-03-07 emurad

あなたはjQueryのUIは、プロジェクトに含まれて持っていれば、あなたが呼び出すことができるはずです。

$("#tags").tagit().sortable();

EDIT

ライン102

コメントアウトself._removeTag();でtagit.js

 this.options.select = function(event, ui) { 
      //self._removeTag(); 
      self._addTag(ui.item.value); 
      return false; 
     }

改訂

例EDIT：

<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <link href="http://webspirited.com/tagit/css/tagit-simple-blue.css" rel="stylesheet" type="text/css"/> 
    <style> 
     body, #demo2 
     { 
      height:150px; 
     } 
     #demo2 
     { 
      background-color:green; 
     } 
    </style> 
</head> 
<body> 
    <ul id="demo2" name="demo2"> 
     <li>here</li> 
     <li>are</li> 
     <li>some</li> 
     <li>initial</li> 
     <li>tags</li> 
    </ul> 
    <input id="btnGetItems" type="button" value="GetVals" /> 
</body> 

</html> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script> 
<script src="http://webspirited.com/tagit/js/tagit.js"></script> 

<script type="text/javascript"> 

    var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme" 
    ]; 


    $(function(){ 
     $('#demo2').tagit({tagSource: availableTags}).sortable(); 
     $('#btnGetItems').click(function(){ 
      getTags(); 
     }); 

    }); 

    function getTags() 
    { 
     var string = "Tags\r\n"; 
     string +="--------\r\n"; 
     $('#demo2 li.tagit-choice').each(function(){ 
      var $tmp = $(this).clone(); 
      $tmp.find('.tagit-close').remove(); 
      string += $tmp.html()+"\r\n"; 
     }); 
     alert(string); 
    } 

</script>

出典

2011-03-07 16:32:58

おかげではなく、オートコンプリートが（私は.sortable追加したときに動作を停止） - それはshowTags機能も選択したタグを入力全体を置き換えますソートされたタグが返されていないので、ソリューションでは視覚的に並べ替えるだけです。 – emurad

@emurad、上記の改訂例を参照してください。私はそれがあなたの懸念をすべて解決すると思います。実装に合わせてスタイルを変更するだけで済みます。 –

素晴らしいですが、1つのバグが残っています。提案リストからアイテムを選択すると、新しいタグを追加するのではなく、最後のタグが置き換えられます。 – emurad

このタグ付けシステムをソート可能にするにはどうすればよいですか？

答えて

関連する問題