原来sortable与selectable是不能同时有效的，必须是一个有效，另一个无效。可以通过sortable的start事件获取原来的position，end事件获取移动后的position。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>jQuery UI Selectable - Serialize</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.6.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.selectable.js"></script>
<script src="../../ui/jquery.ui.sortable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable tr { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).sortable({
disabled:true,
start: function(event, ui) {
alert(ui.item.index());
},
stop:function(event,ui){
alert(ui.item.index());
$( "#selectable" ).sortable( "option", "disabled", true );
$( "#selectable" ).selectable("option", "disabled", false);
}
});
$( "#selectable" ).selectable({
selected:function(event,ui){
//alert("hello");
$( "#selectable" ).selectable("option", "disabled", true);
$( "#selectable" ).sortable( "option", "disabled", false );
}
});
});
</script>
</head>
<body>
<div class="demo">
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<table>
<thead>
<tr><th>姓名</th><th>年龄</th><th>地址</th><th>籍贯</th><th>性别</th></tr>
</thead>
<tbody id="selectable">
<tr class="ui-widget-content"><td>小明</td><td>18</td><td>马家沟</td><td>山东</td><td>男</td></tr>
<tr class="ui-widget-content"><td>小红</td><td>19</td><td>埃里破</td><td>河北</td><td>女</td></tr>
<tr class="ui-widget-content"><td>小路</td><td>18</td><td>新马村</td><td>山西</td><td>男</td></tr>
<tr class="ui-widget-content"><td>小工</td><td>20</td><td>七家村</td><td>陕西</td><td>男</td></tr>
<tr class="ui-widget-content"><td>小马 </td><td>20</td><td>马里村</td><td>湖南</td><td>女</td></tr>
<tr class="ui-widget-content"><td>小北</td><td>19</td><td>北坡里</td><td>河南</td><td>男</td></tr>
</tbody>
</table>
</div><!-- End demo -->
<div class="demo-description">
<p>Write a function that fires on the <code>stop</code> event to collect the index values of selected items. Present values as feedback, or pass as a data string.</p>
</div><!-- End demo-description -->
</body>
</html>
401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
