Implement a drag-and-drop list

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.