用DHTML实现drag and drop的效果
asp.net 2.0里的webpart实在不错，可以在页面里把控件拖来拖去的，那么，如果在JSP，PHP里等要做这样的效果，要如何实现呢？今天偶然发现其实应该有不少这样的javascript库，利用DHTML实现的拖拉效果，效果还不错的。比如http://tool-man.org/examples/上的库就不错，大家可以去下载来试下，而且作者还有个blog,可以和他交流，如果你是DHTML高手，也可以尝试去修改完善之。
先将这个库下载下来，里面有不少DEMO的，其中最重要的是source目录下的所有东西，将整个SOURCE目录COPY到你的工程目录下就可以了。下面给出一个《php hacks》一书的例子来说明如何使用，是PHP的，但其他语言的基本都差不多，因为都是和javascript打交道而已。
index.htm
html>
<head>
<style>
#states li { margin: 0px; }
ul.boxy li { margin: 3px; }
ul.sortable li {
position: relative;
}
ul.boxy {
list-style-type: none;
padding: 0px;
margin: 2px;
width: 20em;
font-size: 13px;
font-family: Arial, sans-serif;
}
ul.boxy li {
cursor:move;
padding: 2px 2px;
border: 1px solid #ccc;
background-color: #eee;
}
.clickable a {
display: block;
text-decoration: none;
cursor: pointer;
cursor: hand;
}
.clickable li:hover {
background-color: #f6f6f6;
}
</style>
<script language="JavaScript" type="text/javascript"
src="source/org/tool-man/core.js"></script>
<script language="JavaScript" type="text/javascript"
src="source/org/tool-man/events.js"></script>
<script language="JavaScript" type="text/javascript"
src="source/org/tool-man/css.js"></script>
<script language="JavaScript" type="text/javascript"
src="source/org/tool-man/coordinates.js"></script>
<script language="JavaScript" type="text/javascript"
src="source/org/tool-man/drag.js"></script>
<script language="JavaScript" type="text/javascript"
src="source/org/tool-man/dragsort.js"></script>
<script language="JavaScript" type="text/javascript"
src="source/org/tool-man/cookies.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
var dragsort = ToolMan.dragsort( )
var junkdrawer = ToolMan.junkdrawer( )
window.onload = function( )
{
dragsort.makeListSortable(document.getElementById("states"),
verticalOnly, saveOrder)
}
function verticalOnly(item) { item.toolManDragGroup.verticalOnly( ) }
function saveOrder(item) { }
function prepFields( )
{
document.getElementById( "states_text" ).value = junkdrawer.
serializeList( document.getElementById( "states" ) );
return true;
}
//-->
</script>
</head>
<body>
<ul id="states" class="boxy">
<li>California</li>
<li>Texas</li>
<li>Alaska</li>
</ul>
<form method="post" action="tellme.php">
<input type="hidden" name="states" value="" id="states_text" />
<input type="submit" onClick="return prepFields( );">
</form>
</body>
</html>
另外一个php文件，叫tellme.php
<body>
<html>
You chose: <?php echo( $_POST['states'] ); ?>
</html>
</body>
以上实现的功能是，用户可以自由移动那三个选项，并且可以按按钮提交后，在tellme.php的页面，可以准确打印出用户排序后的顺序。