jquery ui实现拖动排序
解决了横向拖动产生错位的问题，原因是拖动时会给ul添加一个class=hFinderCategoryFilePlaceholder的li，需要把它指定为float并添加宽高，另外拖动完成要去掉hFinderCategoryFileSelected这个class
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
??? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title></title>
<script src="js/jquery1.7.js"></script>
<script type='text/javascript' src='js/jquery-ui.js'></script>
<script type='text/javascript' src='js/Example 11-3.js'></script>
<link type='text/css' href='style/Example 11-3.css' rel='stylesheet' />
</head>
<body>
<div id='hFinderCategoryFileWrapper'>
? <ul id='hFinderCategoryFiles'>
??? <li title="第一个">
????? <div title="第二个">
????? <div title="第三个">
????? <div title="第四个">
????? <div title=" 第五个">
????? <div title="第六个">
????? <div title="第七个">
????? <div title="第八个">
????? <div title="第九个">
????? <div title=" 第十个">
????? <div class="hFinderCategoryFileIcon"></div>
????? <div class="hFinderCategoryFilePath"> <a href="/Blog/web/ie8_beta2.html"> 第十个 </a> </div>
??? </li>
? </ul>
? <!--<ul id='hFinderOtherCategoryFiles'>
????? </ul>-->
</div>
</body>
</html>
?
js代码
?
$(document).ready(
? function() {??
??? var $selectedFile;
?
??? $('li.hFinderCategoryFile').mousedown(
????? function() {
??????? if ($selectedFile && $selectedFile.length) {
????????? $selectedFile.removeClass('hFinderCategoryFileSelected');
??????? }
??????? $selectedFile = $(this);???????
??????? $selectedFile.addClass('hFinderCategoryFileSelected');
????? }
??? );
??? var saveUpdate = function(e, ui) {
????? var $data = $(this).sortable(
??????? 'serialize', {
????????? attribute: 'title',
????????? expression: /^(.*)$/,
????????? key: 'list[]'
??????? }
????? );
$(".hFinderCategoryFile").removeClass("hFinderCategoryFileSelected");
????? alert($data);
????? // Here you could go on to make an AJAX request
????? // to save the sorted data on the server, which
????? // might look like this:
????? //
????? // $.get('/path/to/server/file.php', $data);
??? };
??? $('ul#hFinderCategoryFiles').sortable({
????? connectWith : [
??????? 'ul#hFinderOtherCategoryFiles'
????? ],
????? placeholder: 'hFinderCategoryFilePlaceholder',
????? opacity: 0.8,
????? cursor: 'move',
????? update: saveUpdate
??? });
???
??? $('ul#hFinderOtherCategoryFiles').sortable({
????? connectWith : [
??????? 'ul#hFinderCategoryFiles'
????? ],
????? placeholder: 'hFinderCategoryFilePlaceholder',
????? opacity: 0.8,
????? cursor: 'move',
????? update: saveUpdate
??? });
? }
);
?
?
css代码：
html,
body {
??? width: 100%;
??? height: 100%;???
}
body {
??? font: normal 12px "Lucida Grande", Arial, sans-serif;
??? background: rgb(189, 189, 189);
??? color: rgb(50, 50, 50);
??? margin: 0;
??? padding: 0;
}
ul#hFinderCategoryFiles,
ul#hFinderOtherCategoryFiles {
?width: 700px;
??? border-bottom: 1px solid rgb(64, 64, 64);
??? border-right: 1px solid rgb(64, 64, 64);
??? background: #fff;
??? list-style: none;
?? margin:0 auto;
??? padding: 0;
}
li.hFinderCategoryFile {
?float: left;
??? padding: 5px 5px 10px 5px;
??? min-height: 48px;
??? width: 120px;
}
li.hFinderCategoryFile h5 {
??? font: normal 12px "Lucida Grande", Arial, sans-serif;
??? margin: 0;
}
div.hFinderCategoryFileIcon {
??? float: left;
??? width: 48px;
??? height: 48px;
??? background:url(../images/Safari%20Document.png)no-repeat;
}
h5.hFinderCategoryFileTitle,
div.hFinderCategoryFilePath {
??? padding-left: 55px;
}
li.hFinderCategoryFileSelected {
??? background: rgb(24, 67, 243);
??? color: white;
}
li.hFinderCategoryFileSelected a {
??? color: lightblue;
}
.hFinderCategoryFilePlaceholder {
??? float:left;
??? background: rgb(230, 230, 230);
??? height: 58px; width: 135px;
}
