Jquery application-image drag/drop sorting
Recently studying interface elements for jquery (http://interface.eyecon.ro/), this plug-in encapsulates some drag effects, and is very simple to use, can easily achieve drag and drop sorting, shopping cart, blog homepage layout and other UI, therefore, the following is a simple example of imitating and sorting pictures:
Code: <HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"
/>
<Title> sortables demo-interface plugin for jquery </title>
<SCRIPT type = "text/JavaScript" src = "jquery. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "interface. js"> </SCRIPT>
<Style type = "text/CSS" Media = "all">
Body
{
Background: # FFF;
Height: 100%;
Font-family: Arial, Helvetica, sans-serif;
Font-size: 10pt;
}
# Sort1
{
Width: 350px;
Height: 200px;
}
Div img
{
Float: left;
Width: 60px;
Height: 60px;
Margin: 10px;
Border: solid 3px # CCC;
}
. Sorthelper
{
Background-color: # f5f5f5;
Float: left;
Border: 4px solid # CCC;
}
. Sortableactive
{
}
. Sortablehover
{
}
</Style>
</Head>
<Body>
<Div id = "sort1">
</Div>
<Div class = "serializer">
<A href = "#" onclick = "serialize (); Return false ;"
> Sort by submission </a>
</Div>
<SCRIPT type = "text/JavaScript">
$ (Document). Ready (
Function (){
$ ('# Sort1'). sortable (
{
Accept: 'sortableitem', // drag the element Class Name
Helperclass: 'sorthelper ', // The placement style when dragging
Activeclass: 'sortableactive', // class
Hoverclass: 'sortablehover ', // class
Opacity: 0.5, // transparency when dragging
FX: 200, // return speed when dragging
Revert: True,
Floats: True,
Tolerance: 'pointer ',
Onchange: changedata // event triggered when the Drag and Drop status changes
}
)
}
);
Function changedata ()
{
}
Function serialize (s)
{
Serial = $. sortserialize (s );
Alert (Serial. Hash. Replace (/& sort1 "["] =/g, ","). Replace ("sort1 [] = ",""));
/* Here you can use the jquery form plug-in Ajax to submit
Http://www.malsup.com/jquery/form/#code-samples)
Easy to use
*/
};
</SCRIPT>
</Body>
</Html>
Source code: Click here to download the compressed package
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
