解决了横向拖动产生错位的问题,原因是拖动时会给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 class="hFinderCategoryFile" title="第一个">
<div class="hFinderCategoryFileIcon"></div>
<div class="hFinderCategoryFilePath"> <a href="#"> 第一个 </a> </div>
</li>
<li class="hFinderCategoryFile" title="第二个">
<div class="hFinderCategoryFileIcon"></div>
<div class="hFinderCategoryFilePath"> <a href="/Blog/php/Polymorphism.html"> 第二个 </a> </div>
</li>
<li class="hFinderCategoryFile" title="第三个">
<div class="hFinderCategoryFileIcon"></div>
<div class="hFinderCategoryFilePath"> <a href="/Blog/php/Backup%20Script.html"> 第三个 </a> </div>
</li>
<li class="hFinderCategoryFile" title="第四个">
<div class="hFinderCategoryFileIcon"></div>
<div class="hFinderCategoryFilePath"> <a href="/Blog/web/html5_doctype.html"> 第四个 </a> </div>
</li>
<li class="hFinderCategoryFile" title=" 第五个">
<div class="hFinderCategoryFileIcon"></div>
<div class="hFinderCategoryFilePath"> <a href="/Blog/web/ie8_beta2.html"> 第五个 </a> </div>
</li>
<li class="hFinderCategoryFile" title="第六个">
<div class="hFinderCategoryFileIcon"></div>
<div class="hFinderCategoryFilePath"> <a href="#"> 第六个 </a> </div>
</li>
<li class="hFinderCategoryFile" title="第七个">
<div class="hFinderCategoryFileIcon"></div>
<div class="hFinderCategoryFilePath"> <a href="/Blog/php/Polymorphism.html"> 第七个 </a> </div>
</li>
<li class="hFinderCategoryFile" title="第八个">
<div class="hFinderCategoryFileIcon"></div>
<div class="hFinderCategoryFilePath"> <a href="/Blog/php/Backup%20Script.html"> 第八个 </a> </div>
</li>
<li class="hFinderCategoryFile" title="第九个">
<div class="hFinderCategoryFileIcon"></div>
<div class="hFinderCategoryFilePath"> <a href="/Blog/web/html5_doctype.html"> 第九个 </a> </div>
</li>
<li class="hFinderCategoryFile" 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;
}