我在SO上发现了这个jQuery标记系统:http://webspirited.com/tagit/?page=tagit我非常喜欢它,但我需要能够拖放标记来对它们进行排序。
非常感谢您的帮助。
答案 0 :(得分:0)
如果您的项目中包含jQuery UI,您应该可以调用:
$( "#tags" ).tagit().sortable();
修改强>
第102行
在tagit.js中注释掉self._removeTag();
this.options.select = function(event, ui) {
//self._removeTag();
self._addTag(ui.item.value);
return false;
}
修改强>
修订示例:
<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>