This article inherits the "Implementation of drag-and-drop lists", the "display of Dynamically Loaded data in the form of lists", and the "use Dom to parse XML files" function to further extend the function. Instance Background: each list item is the name of an XML file. When you drag a list item, the file content corresponding to the list item is parsed using Dom and displayed as a table on the home page.
Development Environment:Eclipse
Language used:Javascript, HTML, Java, JSP
Method used:Use JavaScript to write the port, call JSP to pass parameters, receive data, and display the data on the home page to complete data interaction.
Source code for implementing the function:
1. HTML source code on the home page
<! 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> data source list display </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> List of encapsulated resources <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 source code used
<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 source code used
Getdslists. js source code:
<SCRIPT type = "text/JavaScript">
Position. includescroloffsets = 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 ('lil ');
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 ");}
}
}
</SCRIPT>
4. JSP source code
<% @ 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 ));
%>
The above is all the source code for implementing the "Drag and Drop of list items and data display" function. If you need it, you can sort it out based on the listed content and try it out in Tomcat. If you have any questions, please submit them.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
