All geek questions in one place

How can I make this labeling system sortable?

I found this jQuery tag system mentioned in SO: http://webspirited.com/tagit/?page=tagit and I really like it, but I need to be able to drag and drop tags to sort them.

Your help will be greatly appreciated.

+4
source share
1 answer

If you have a jQuery user interface included in your project, you can call:

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

EDIT

Line 102

Comment self._removeTag(); in tagit.js

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

EDIT

Example:

 <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>
0
source

Source: https://habr.com/ru/post/1342663/

More articles:


All Articles