最好用的jquery列表拖动排列(由项目提取)

最新推荐文章于 2023-04-28 18:01:04 发布

weixin_30294021

最新推荐文章于 2023-04-28 18:01:04 发布

阅读量109

点赞数

原文链接：http://www.cnblogs.com/mqxnongmin/p/10719639.html

版权

最好的jquery列表拖动排列自己定义拖动层排列

代码一预览:

<!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>最好的jquery列表拖动排列自己定义拖动层排列</title>
<meta name="description" content="jquery列表模块拖动层，当点击或拖动列表时，能够自己定义任意拖放列表模块到对应位置。支持回调函数的拖动层。" />
<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 */
.demo{padding:20px;width:800px;margin:20px auto;border:solid 1px black;}
.demo h2{margin:30px 0 20px 0;color:#3366cc;}
/* dragfunction */
.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 */
.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列表拖动排列演示</h1>

<h2>简单的一组列表:</h2>

<ul class="dragsort-ver">
<li>你猜</li>
<li>你不猜</li>
<li>你不猜你不猜</li>
<li><input type="checkbox" name="intro_fields[]" value="猜猜"/>猜猜</li>
<li>你猜不猜</li>
<li>你猜不猜不猜</li>
<li>你不猜不猜</li>
</ul>
<br/>

<script type="text/javascript">
$("ul:first").dragsort();
</script>

<h2>两组列表拖放:(无限组拖放)</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>

<!-- 排序保存在这里能够检索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选择器内的元素的列表项的拖动手柄。默认值是“li”。

</dd> <dt>dragSelectorExclude</dt> <dd>CSS选择器的元素内的dragSelector不会触发dragsort的。默认值是"input, textarea, a[href]"。</dd> <dt>dragEnd</dt> <dd>拖动结束后将被调用的回调函数.</dd> <dt>dragBetween</dt> <dd>设置为“true”。假设你要启用多组列表之间拖动选定的列表。默认值是false。</dd> <dt>placeHolderTemplate</dt> <dd>拖动列表的HTML部分。默认值是"<li></li>".</dd> <dt>scrollContainer</dt> <dd>CSS选择器的元素，作为滚动容器。比如溢出的div设置为自己主动。

默认值是“窗体“.</dd> <dt>scrollSpeed</dt> <dd>一个数字。它代表了速度，页面拖动某一项时。将滚动容器外，较高使用价值的是速度和较低的值是较慢的。假设设置为"0"以禁用滚动。默认值是"5".</dd> </dl> </div> </body> </html>

代码2预览:

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery UI sortable()实现拖动排序</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",                        //仅仅是li能够拖动
          opacity: 0.6,                       //拖动时，透明度为0.6
          revert: true,                       //释放时，添加动画
          update : function(event, ui){       //更新排序之后
              alert($(this).sortable("toArray"));
          }
         });
       });
      </script>
      <ul class="sortable">
        <li class="ui-state-default"  id="1">第1项</li>
        <li class="ui-state-default"  id="2" >第2项</li>
        <li class="ui-state-default"  id="3">第3项</li>
      </ul>
    </body>
</html>

代码压缩包下载: http://pan.baidu.com/s/1mgxAIy0

谢谢关注websites博客!

转载于:https://www.cnblogs.com/mqxnongmin/p/10719639.html

weixin_30294021

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
最好用的jquery列表拖动排列(由项目提取)

版权声明：本文为博主原创文章，未经博主同意不得转载。 https://blog.csdn.net/wuchengzeng/article/details/31766235 最好的jquery列表拖动...
复制链接

扫一扫