<! DOCTYPE html>
<title>dragsort example</title>
<meta charset= "Utf-8"/>
<style type= "Text/css" >
body {font-family:arial; font-size:12pt; padding:20px; width:820px; margin:20px auto; border:solid 1px black;}
UL {margin:0px; padding:0px; margin-left:20px;}
#list2 {width:350px; list-style-type:none; margin:0px;}
#list2 li {float:left; padding:5px; width:100px; height:100px;}
#list2 Div {width:90px; height:50px; border:solid 1px black; Background-color: #E0E0E0; text-align:center; padding-top : 40px; }
PlaceHolder Div {background-color:white!important; border:dashed 1px gray!important;}
</style>
<body>
<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.11.1.min.js" ></script>
<script type= "Text/javascript" src= "Jquery.dragsort-0.5.2.min.js" ></script>
<div id= "List_div" style= "width:500px; Height:100px;overflow:auto" >
<ul id= "List2" >
<li><div>10</div></li>
<li><div>11</div></li>
<li><div>12</div></li>
<li><div>13</div></li>
<li><div>14</div></li>
<li><div>15</div></li>
<li><div>16</div></li>
<li><div>17</div></li>
<li><div>18</div></li>
</ul>
</div>
<!--save sort order here which can is retrieved on server on postback-
<input name= "List1sortorder" type= "hidden"/>
<script type= "Text/javascript" >
$ ("#list2"). Dragsort ({
Dragselector: "Div",
Dragbetween:true,
Dragend:saveorder,
Placeholdertemplate: "<li class= ' PlaceHolder ' ><div></div></li>",
scrollcontainer:$ ("#list_div")
});
function Saveorder () {
var data = $ ("#list2 Li"). Map (function () {return $ (this). Children (). HTML ();}). Get ();
$ ("Input[name=list1sortorder]"). Val (Data.join ("|"));
};
</script>
</body>
Dragsort Use of Drag plugins
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
