本文继承了文章“实现可拖拽的列表”、文章“以列表形式显示动态加载的数据 ”和文章“使用Dom解析xml文件”的功能，进一步将功能延伸。实例背景：每一个列表项为一个xml文件的名字，拖拽每一个列表项时，将列表项对应的文件内容使用Dom解析出来，以表格的形式显示在主页面上。
开发环境：eclipse
使用的语言：JavaScript，HTML，Java，JSP
采用的方法：使用JavaScript书写端口，调用JSP传递参数，接收数据，将数据在主页面显示，从而完成数据交互。
实现功能的源代码：
1. 主页面的HTML源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据源列表显示</title>
<script type=text/javascript src="/MIS_Frame_0.1/src/prototype.js"></script>
<script type=text/javascript src="/MIS_Frame_0.1/GetDSLists.js"></script>
<script type="text/javascript" src="/MIS_Frame_0.1/src/scriptaculous.js"></script>
<script type="text/javascript">
var applicationRoot = "/MIS_Frame_0.1/";
</script>
</head>
<body onLoad="javascript:getdslists();">
<h1>已封装的资源列表</h1>
<hr/>
<div id="leftDiv" onMouseOver="javascript:dragtest();"></div>
<div id="rightContainers">
<div id="grp1">
accepts first box
accepts first box
accepts first box
</div>
</div>
</body>
</html>
2. 用到的CSS源代码
<style type="text/css">
div, li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
ul {
position:relative;
list-style: none;
margin:0; padding:0;
overflow: visible;
}
li {position:relative;}
#leftDiv {
position: absolute;
top: 16%; left: 0; bottom: 0;
width: 30%;
margin: 0; padding: 7px;
border-right: 2px solid #bb9;
background-color: #eed;
}
#leftDiv li {
margin: 3px 0; padding: 3px 3em 3px 10px;
border: 2px solid #456;
background-color: #cde;
cursor: move;
}
#rightContainers {
padding: .5em;
position: absolute;
top: 16%;
bottom: 0;
right: 0;
left: 35%;
overflow:auto;
width: 936px;
height: 1072px;
}
</style>
3. 用到的JavaScript源代码
GetDSLists.js源码：
<script type="text/javascript">
Position.includeScrollOffsets = true;
var listTest="test";
Draggables.clear = function (event)
{
while (Draggables.drags.length)
{
var d = Draggables.drags.pop();
var e = d.element;
d.stopScrolling();
d.destroy();
d.element = null;
if (e.parentNode)
{
e.parentNode.removeChild(e)
};
}
}
function cleanup()
{
//try to remove circular references
lis = document.getElementsByTagName("li");
for (i = 0; i < lis.length; i++)
{
if (lis[i].longListItem)
{
lis[i].longListItem.destroy();
}
else if (lis[i].container)
{
lis[i].container.destroy();
}
}
Draggables.clear();
}
function dragtest()
{
var li = $("leftDiv").getElementsByTagName('LI');
for (var i = 0; i < li.length; i++)
{
var j=0;
var d = new Draggable(li[i],
{
revert:true,
ghosting: false,
scroll: "rightContainers",
onEnd:function()
{
var liId=li[i];
if(event.srcElement.id)
{
var CurClickID = event.srcElement.id ;
listTest=$(CurClickID).innerText;
sendlisttext();
//alert($(CurClickID).innerText);
}
}
});
}
var divs = $("rightContainers").getElementsByTagName("div");
for (i = 0; i < divs.length; i++)
{
if (divs[i].className && Element.hasClassName(divs[i], "container"))
{
Droppables.add(divs[i].id, {hoverclass: "hover", scrollingParent: "rightContainers"});
}
}
Event.observe(window, 'unload', cleanup, false);
}
var XmlHttp;
function sendlisttext()
{
CreateXMLHttpRequest();
XmlHttp.open("POST",applicationRoot + "/GetlistText.jsp",true);
XmlHttp.onreadystatechange=HandleStateChange;
XmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
XmlHttp.send("listTest="+listTest);
}
function CreateXMLHttpRequest()
{
if(window.ActiveXObject)
{
XmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttRequest)
{
XmlHttp=new XMLHttpRequest();
}
}
function HandleStateChange()
{
if(XmlHttp.readyState==4)
{
//alert("ok");
if(XmlHttp.status==200)
{
//alert("ok,good");
//alert(xmlHttp.responseText);
$("rightContainers").innerHTML=XmlHttp.responseText;
}else {alert("wrong wrong");}
}
}
</script>
4. JSP源码
<%@ page contentType="text/xml;charset=GB2312"%>
<%@ page import="manage.*" %>
<%
String pstr= request.getParameter("listTest");
ShowDSValue dsvalues = new ShowDSValue();
String filename=pstr;
String path = dsvalues.CreatPath(filename);
response.setContentType("text/xml");
out.clear();
out.print(dsvalues.get_root_childName_childName(path));
%>
以上是实现“列表项的拖拽与数据显示”功能的所有源代码，需要它的朋友，可以根据列出的内容整理一下，然后在tomcat下试运行。如有问题，请提出。
