本文实例讲述了jquery拖动层效果插件用法。分享给大家供大家参考，具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Drag Drop Panels - Web Developer Plus Demos</title>
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js" ></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" >
$(function(){
$('.dragbox')
.each(function(){
$(this).hover(function(){
$(this).find('h2').addClass('collapse');
}, function(){
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function(){
$(this).find('.configure').css('visibility', 'visible');
}, function(){
$(this).find('.configure').css('visibility', 'hidden');
})
.click(function(){
$(this).siblings('.dragbox-content').toggle();
})
.end()
.find('.configure').css('visibility', 'hidden');
});
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui){
$(ui.item).find('h2').click();
var sortorder='';
$('.column').each(function(){
var itemorder=$(this).sortable('toArray');
var columnId=$(this).attr('id');
sortorder+=columnId+'='+itemorder.toString()+'&';
});
alert('SortOrder: '+sortorder);
/*Pass sortorder variable to server using ajax to save state*/
}
})
.disableSelection();
});
</script>
</head>
<body>
<h3>Drag n Drop Panels</h3>
<div class="column" id="column1">
<div class="dragbox" id="item1" >
<h2>Handle 1</h2>
<div class="dragbox-content" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum velit ultricies orci pharetra elementum. In massa mauris, varius sed tempus a, iaculis sed erat. Ut sollicitudin tellus mollis arcu laoreet semper. Suspendisse ut felis odio. Aliquam auctor, tortor sit amet suscipit elementum, nunc ante dictum lectus, ac accumsan justo nunc sed velit. Sed sollicitudin varius tortor vitae varius. Aliquam interdum, nisl consectetur laoreet commodo, metus massa sagittis nisl, non venenatis lacus mi nec tortor. Ut malesuada auctor dolor, id pulvinar est malesuada sed. Aliquam sed posuere orci.
