我最近做了类似的研究,我得出结论,JQuery <强> < /强>是路要走。只是因为我发现可用的最高金额,可以理解(对我来说)代码示例……其中一个我帖子(我忘了我从哪里剪它)。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8" />
<title>Sortables demo - Interface plugin for jQuery</title>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript" src="/interface/interface.js"></script>
<style type="text/css" media="all">
html
{
height: 100%;
}
img{
border: none;
}
body
{
background: #fff;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.groupWrapper
{
width: 32%;
float: left;
margin-right: 1%;
min-height: 400px;
}
.serializer
{
clear: both;
}
.groupItem
{
margin-bottom: 20px;
}
.groupItem .itemHeader
{
line-height: 28px;
background-color: #DAFF9F;
border-top: 2px solid #B5EF59;
color: #000;
padding: 0 10px;
cursor: move;
font-weight: bold;
font-size: 16px;
height: 28px;
position: relative;
}
.groupItem .itemHeader a
{
position: absolute;
right: 10px;
top: 0px;
font-weight: normal;
font-size: 11px;
text-decoration: none;
}
.sortHelper
{
border: 3px dashed #666;
width: auto !important;
}
.groupWrapper p
{
height: 1px;
overflow: hidden;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="sort1" class="groupWrapper">
<div id="newsFeeder" class="groupItem">
<div class="itemHeader">Feeds<a href="#" class="closeEl">[-]</a></div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>
<div id="news" class="groupItem">
<div class="itemHeader">News<a href="#" class="closeEl">[-]</a></div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>
<p> </p>
</div>
<div id="sort2" class="groupWrapper">
<div id="shop" class="groupItem">
<div class="itemHeader">Shopping<a href="#" class="closeEl">[-]</a></div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>
<p> </p>
</div>
<div id="sort3" class="groupWrapper">
<div id="links" class="groupItem">
<div class="itemHeader">Links<a href="#" class="closeEl">[-]</a></div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>
<div id="images" class="groupItem">
<div class="itemHeader">Images<a href="#" class="closeEl">[-]</a></div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>
<p> </p>
</div>
<script type="text/javascript">
$(document).ready(
function () {
$( a.closeEl ).bind( click , toggleContent);
$( div.groupWrapper ).Sortable(
{
accept: groupItem ,
helperclass: sortHelper ,
activeclass : sortableactive ,
hoverclass : sortablehover ,
handle: div.itemHeader ,
tolerance: pointer ,
onChange : function(ser)
{
},
onStart : function()
{
$.iAutoscroller.start(this, document.getElementsByTagName( body ));
},
onStop : function()
{
$.iAutoscroller.stop();
}
}
);
}
);
var toggleContent = function(e)
{
var targetContent = $( div.itemContent , this.parentNode.parentNode);
if (targetContent.css( display ) == none ) {
targetContent.slideDown(300);
$(this).html( [-] );
} else {
targetContent.slideUp(300);
$(this).html( [+] );
}
return false;
};
function serialize(s)
{
serial = $.SortSerialize(s);
alert(serial.hash);
};
</script>
<div class="serializer">
<a href="#" onClick="serialize(); return false;" >serialize all lists</a>
<a href="#" onClick="serialize( sort1 ); return false;" >serialize list 1</a>
<a href="#" onClick="serialize( sort2 ); return false;" >serialize list 2</a>
<a href="#" onClick="serialize( sort3 ); return false;" >serialize list 3</a>
<a href="#" onClick="serialize([ sort1 , sort3 ]); return false;" >serialize lists 2 and 3</a>
</div>
<script language="JavaScript" type="text/javascript">var client_id = 1;</script>
<script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"></script>
<noscript>
<p><img alt="" src="http://stats.byspirit.ro/image.php?client_id=1" width="1" height="1" /></p>
</noscript>
</body>
</html>
