<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../public/js/jquery-1.8.3.js"></script>
<script src="../public/js/jquery-ui-1.10.4.custom.js"></script>
<script src="../public/js/jquery-ui.js"></script>
<link rel="style/css" href="../public/css/jquery-ui.css" >
<title></title>
<style type="text/css">
.draggable{width: 150px;height: 150px;background-color: #990}
#contain{margin-left:20px;margin-bottom:20px; width:200px;height:200px;background-color: blue;}
#parent{margin-left:20px;margin-bottom:20px; width:500px;height:500px;background-color:red;}
.main{width:800px;height:400px;border:1px solid;margin: 0px;padding: 50px 20px;}
.left{width:500px;height:300px;float: left;}
.right{width:200px;height: 300px;border: 1px solid;float: right;}
.left div {
width: 98%;
height:30px;
background-color: #fef;
margin: 5px 0;
}
#th {
width: 98%;
height:30px;
background-color: #fef;
margin: 5px 0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#catalog").accordion(); //让div可以折叠显示
$("#catalog li").draggable({
appendTo:"body",
helper:"clone",
cusor:"move"
});
$("#cart ol").droppable({ //设置放置的容器
activeClass:"ui-state-default",
hoverClass:"ui-state-hover",
accept:"li",
drop:function(event,ui){
//ui.draggable.text(); //获取当前拖动元素的内容
//将拖动的元素添加到ol标签下新建的li标签中
$("<li></li>").text(ui.draggable.text()).appendTo(this);
}
}).sortable({
items:"ol li", //获取购物车所有li元素列表
sort:function(){ //对列表进行排序
$(this).removeClass("ui-state-default");
}
})
});
</script>
</head>
<body>
<div id="main" class="main">
<div class="left">
<div><span style="font-size:30px;">产品列表</span></div>
<div id="catalog" style="height: 100px;">
<span>包包</span>
<ul >
<li>蓝色包包</li>
<li>黑色包包</li>
<li>绿色包包</li>
</ul>
</div>
<div><span>小配件</span></div>
</div>
<div class="right">
<div id="th"><span style="font-size:30px;">购物车</span></div>
<div id="cart" style="height: 100%;">
<ol style="height: 100%;">
<li>男士T恤</li>
<li>女士T恤</li>
</ol>
</div>
</div>
</div>
</body>
</html>原文：http://blog.csdn.net/colorsunlight/article/details/44679973