Dragging the list of jquery to arrange the of extracted from the items is quite handy
- 2020-03-30 03:22:28
- OfStack
Code 1 preview:
Code 2 preview:
(link: http://xiazai.jb51.net/201406/yuanma/jQuerytdpx_jb51.net.rar)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> One of the best jquery List drag arrangement custom drag arrangement </title>
<meta name="description" content="jquery Drag the list module layer, when click or drag the list, you can customize the list module to the corresponding location. Supports a drag layer for callback functions. " />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dragsort-0.4.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font-family:Arial;font-size:12pt;color:#333;}
h1{font-size:16pt;}
h2{font-size:13pt;}
.demo{padding:20px;width:800px;margin:20px auto;border:solid 1px black;}
.demo h2{margin:30px 0 20px 0;color:#3366cc;}
.dragfunction{margin:40px 0 0 0;}
.dragfunction dt{height:30px;font-weight:800;}
.dragfunction dd{line-height:22px;padding:0 0 20px 0;color:#5e5e5e;}
.dragsort-ver li{height:30px;line-height:30px;}
.dragsort{width:350px;list-style-type:none;margin:0px;}
.dragsort li{float:left;padding:5px;width:100px;height:100px;}
.dragsort 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>
</head>
<body>
<div class="demo">
<h1>jQuery List drag to arrange the demo </h1>
<h2> A simple set of lists :</h2>
<ul class="dragsort-ver">
<li> Can you guess what </li>
<li> You don't guess </li>
<li> You don't guess you don't guess </li>
<li><input type="checkbox" name="intro_fields[]" value=" Guess what "/> Guess what </li>
<li> You don't guess </li>
<li> Guess or not </li>
<li> You can't guess </li>
</ul>
<br/>
<script type="text/javascript">
$("ul:first").dragsort();
</script>
<h2> Drag and drop two sets of lists :( Infinite group of drag and drop )</h2>
<ul class="dragsort" id="list2" style="float:right;">
<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>
<ul class="dragsort" id="list1">
<li><div>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
<li><div>4</div></li>
<li><div>5</div></li>
<li><div>6</div></li>
<li><div>7</div></li>
<li><div>8</div></li>
<li><div>9</div></li>
</ul>
<!-- The sort is saved here to retrieve the return from the server -->
<input name="list1SortOrder" type="hidden" />
<script type="text/javascript">
$("#list1, #list2").dragsort({
dragSelector: "div",
dragBetween: true,
dragEnd: saveOrder,
placeHolderTemplate: "<li class='placeHolder'><div></div></li>",
scrollSpeed: 5
});
function saveOrder() {
var data = $("#list1 li").map(function(){
return
$(this).children().html();
}).get();
$("input[name=list1SortOrder]").val(data.join("|"));
};
</script>
<div style="clear:both;"></div>
<h2>Usage</h2>
$("ul").dragsort({ dragSelector: "li", dragEnd: function() { }, dragBetween: false, placeHolderTemplate: "<li></li>" });<br/>
<br/>
<dl class="dragfunction">
<dt>dragSelector</dt>
<dd>CSS The drag handle for the list item of the element in the selector. The default value is" li ". </dd>
<dt>dragSelectorExclude</dt>
<dd>CSS Within the element of the selector dragSelector Not trigger dragsort . The default value is "input, textarea, a[href]" . </dd>
<dt>dragEnd</dt>
<dd> The callback function that will be called when the drag is complete .</dd>
<dt>dragBetween</dt>
<dd> Set to" true If you want to enable multiple groups of lists drag the selected list between them. The default value is false . </dd>
<dt>placeHolderTemplate</dt>
<dd> Drag a list of HTML Part. The default value is "<li></li>".</dd>
<dt>scrollContainer</dt>
<dd>CSS Element of a selector that ACTS as a scrolling container, such as an overflow div Set to auto. The default is "window" .</dd>
<dt>scrollSpeed</dt>
<dd> A number which represents the speed, when the page drags a certain item, will scroll outside the container, the higher the use value is the speed and the lower the value is the slower. If set to "0" To disable scrolling. The default value is "5".</dd>
</dl>
</div>
</body>
</html>
Code 2 preview:
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI sortable() Drag sort </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://tool.phpddt.com/resources/js/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<script>
$(function() {
$( ".sortable" ).sortable({
cursor: "move",
items :"li", //But li can drag
opacity: 0.6, //When dragged, the transparency is 0.6
revert: true, //When released, add animation
update : function(event, ui){ //After the update sort
alert($(this).sortable("toArray"));
}
});
});
</script>
<ul class="sortable">
<li class="ui-state-default" id="1"> The first 1 item </li>
<li class="ui-state-default" id="2" > The first 2 item </li>
<li class="ui-state-default" id="3"> The first 3 item </li>
</ul>
</body>
</html>
(link: http://xiazai.jb51.net/201406/yuanma/jQuerytdpx_jb51.net.rar)