Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml"> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> jQuery Dynamic drag' n Drop </title>
<Script type = "text/javascript" src = "http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-1.3.2.min.js"> </script> <style type = "text/css"> </style>
<Script type = "text/javascript" src = "http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-ui-1.7.1.custom.min.js"> </script>
<Style>
Body {
Font-family: Arial, Helvetica, sans-serif;
Font-size: 16px;
Margin-top: 10px;
}
Ul {
Margin: 0;
}
# ContentWrap {
Width: 700px;
Margin: 0 auto;
Height: auto;
Overflow: hidden;
}
# ContentTop {
Width: 600px;
Padding: 10px;
Margin-left: 30px;
}
# ContentLeft {
Float: left;
Width: 400px;
}
# ContentLeft li {
List-style: none;
Margin: 0 0 4px 0;
Padding: 10px;
Background-color: #00 CCCC;
Border: # CCCCCC solid 1px;
Color: # fff;
}
# ContentRight {
Float: right;
Width: 260px;
Padding: 10px;
Background-color: #336600;
Color: # FFFFFF;
}
</Style>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ (Function (){
$ ("# ContentLeft ul"). sortable ({opacity: 0.5, cursor: 'move ', update: function (){
Var id = "";
$ ("Ul. ui-sortable li"). each (function (){
Id + = $ (this). attr ("id") + "<br/> ";
})
$ ("# ContentRight" ).html (id );
}
});
});
});
</Script>
</Head>
<Body style = "cursor: auto;">
<Div id = "contentWrap">
<Div id = "contentLeft">
<Ul class = "ui-sortable">
<Li id = "recordsArray_3" style = "opacity: 1; z-index: 0;" class = ""> 3. Returned array can be found at the right </li>
<Li id = "recordsArray_2"> 2. Dragging changes the opacity of the item </li>
<Li id = "recordsArray_1" style = "opacity: 1; z-index: 0;" class = ""> 1. Once dropped, an Ajax query is activated </li>
<Li id = "recordsArray_4" style = "opacity: 1; z-index: 0;" class = ""> 4. It is very easy </li>
<Li id = "recordsArray_5" style = "opacity: 1; z-index: 0;" class = ""> 5. It is very easy </li>
<Li id = "recordsArray_6" style = "opacity: 1; z-index: 0;" class = ""> 6. It is very easy </li>
<Li id = "recordsArray_7" style = "opacity: 1; z-index: 0;" class = ""> 7. It is very easy </li>
</Ul>
</Div>
<Div id = "contentRight"> </div>
</Div>
</Body>
Demo address