This article is to perform further operations on the previous article "display Dynamically Loaded data in the form of a list", so that all options of the list can be dragged.
Development Environment:Eclipse
Language used:Javascript, html
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">
VaR applicationroot = "/mis_frame_0.1 /";
</SCRIPT>
</Head>
<Body>
<H1> List of encapsulated resources <HR/>
<Div id = "leftdiv" onmouseover = "javascript: dragtest ();">
<Ul id = "masterlist">
<Li id = "drag1"> Baidu </LI>
<Li id = "drag2"> Sina </LI>
<Li id = "drag2"> Sohu </LI>
</Ul>
</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;
}
# Leftdiv Li, # rightcontainers Div. Container 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;
}
# Rightcontainers Div. Container {
Background-color: # bb9;
Margin: 0 0 40px 0; padding: 0 0 1px 0;
Border: 2px solid #775;
}
# Rightcontainers Div. Container H2 {
Margin: 0; padding: 2px 1em 0 1em;
Text-align: center;
}
# Rightcontainers Div. Container ul {
Margin: 5px; padding: 0 3px;
Background-color: white;
Border: 1px solid black;
}
# Rightcontainers Div. Container ul. Empty {
Padding: 3px 0;
}
# Rightcontainers Div. Hover {
Background-color: # eed;
}
</Style>
3. JavaScript source code used
<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"
});
}
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 );
}
</SCRIPT>
The above is all the source code for implementing the "List-ready drag-and-drop" function. If you need it, you can sort it out based on the listed content and try it out in Tomcat. You can also use the previous article "display Dynamically Loaded data in the form of a list" to implement a drag-and-drop dynamic list. 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
