How can I make this tagging system sortable?
I found this jQuery tagging system mentioned on SO: http://webspirited.com/tagit/?page=tagit and I really like it but I need to开发者_开发技巧 be able to drag and drop the tags to sort them.
Your help would be greatly appreciated.
If you've got jQuery UI included in your project, you should be able to call:
$( "#tags" ).tagit().sortable();
EDIT
Line 102
Comment out self._removeTag(); in tagit.js
this.options.select = function(event, ui) {
//self._removeTag();
self._addTag(ui.item.value);
return false;
}
EDIT
Example Revised:
<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>
加载中,请稍侯......
精彩评论