body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin-top: 10px;
}
ul {
margin: 0;
}
#contentWrap {
width: 700px;
margin: 0 auto;
height: auto;
overflow: hidden;
}
#contentTop {
width: 600px;
padding: 10px;
margin-left: 30px;
}
#contentLeft {
float: left;
width: 400px;
}
#contentLeft li {
list-style: none;
margin: 0 0 4px 0;
padding: 10px;
background-color:#00CCCC;
border: #CCCCCC solid 1px;
color:#fff;
}
#contentRight {
float: right;
width: 260px;
padding:10px;
background-color:#336600;
color:#FFFFFF;
}
$(document).ready(function(){
$(function() {
$("#contentLeft ul").sortable({ opacity: 0.5, cursor: 'move', update: function() {
var id="";
$("ul.ui-sortable li").each(function(){
id+=$(this).attr("id")+"
";
})
$("#contentRight").html(id);
}
});
});
});
- 3. Returned array can be found at the right
- 2. Dragging changes the opacity of the item
- 1. Once dropped, an Ajax query is activated
- 4. It is very very easy
- 5. It is very very easy
- 6. It is very very easy
- 7. It is very very easy
demo地址