<style type="text/css">
li {
background: #eef;
margin-bottom:5px;
list-style-type: none;
}
.color1{background: #ffe;
margin-bottom:5px;
list-style-type: none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#selectable").selectable({ //进行拖动多选
stop:function(){ //当拖动选择结束时，触发stop事件
var result=$("#select-result").empty(); //清空结果列表
$(".ui-selected",this).each(function(){ //当选中时，jqueryui会自动加样式ui-selected,循环选中的结果
var index=$("#selectable li").index(this); //获取选中的索引
result.append("#"+(index+1)+""+$(this).html()); //显示选中的索引和值
})
}
});
$("li").toggle(
function(){
$(this).addClass("color1");
},
function(){
$(this).removeClass("color1");
}
);
});
</script>
</head>
<body>
<p id="feedback">
<span>已经选择的结果:</span><span id="select-result">none</span>
</p>
<ol id="selectable">
<li class="ui-widget-content">张小三</li>
<li class="ui-widget-content">李四</li>
<li class="ui-widget-content">王强</li>
<li class="ui-widget-content">韩琦</li>
<li class="ui-widget-content">廖婉如</li>
<li class="ui-widget-content">苏志宇</li>
</ol>
</body>时间： 2024-11-05 18:49:40