JQuery UI Sortable拖动排序布局使用入门（一）

最新推荐文章于 2024-05-14 09:47:51 发布

onekbit

最新推荐文章于 2024-05-14 09:47:51 发布

阅读量373

点赞数

分类专栏： www.onekbit.com 文章标签： jquery ui 前端

原文链接：https://www.onekbit.com/ViewBlog/blog/BID20190818100167

版权

www.onekbit.com 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近在学习JQuery UI Sortable拖动排序布局，想在【易可导航】上实现一个自定义拖拽式布局的页面，特将自己学习过程记录下来，重要信息如下：
官方网址：Sortable | jQuery UI
中文文档：jQuery UI API – 可排序小部件（Sortable Widget） | 菜鸟教程

网页代码如下：

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>自定义办公导航-一个可以赚钱的自定义网址导航-导航页布局</title>
<link rel="shortcut icon" href="AdminPages/source/images/favicon.ico"type="imagend.microsoft.icon"/>
<meta name="pragma" content="no-cache" />
<meta name="cache-control" content="no-cache"/>
<meta name="expires" content="0"/>
<meta name="keywords" content="keyword1,keyword2,keyword3"/>
<meta name="description" content="This is my page"/>
<meta name="renderer" content="webkit"/>
<!-- 页面小图标 -->
<link rel="stylesheet" href="AdminPages/source/css/font-awesome.min.css"/>
<link rel="stylesheet" href="AdminPages/source/jqueryui/jquery-ui.min.css"/>
<link rel="stylesheet" href="AdminPages/source/jqueryui/jquery-ui.theme.min.css"/>
<style>
 #sortable { list-style-type: none; margin: 0; padding: 0; width: 1300px; } 
 #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 150px; height: 20px;text-align: center; } 
</style>
</head>
<body>
	<form action="" method="post" id="formid">
	<%@ include file="/AdminPages/public/header.jspf"%>
		<section class="siteCrumbs">
			<div class="container">
				自定义导航页面排版
			</div>
		</section>
			<section class="siteMain">
			<div class="container">
				<!-- <div class="container-bd edit-product-form"> -->
    <fieldset>
    <legend>选择网址(每行8列，一页8行，只保存选中的前64个网址)，上下左右拖动网址来排列布局: </legend>
					<ul id="sortable" class="sortable">
					<c:forEach items="${oflist}" var="fun" varStatus="status">
					<li class="ui-state-default">
					 <label for="checkbox-nested-${status.index+1}">
                     <input type="checkbox" name="ofid" id="checkbox_${status.index+1}" value="${fun.id}" style="margin-left: 1px">
					 ${fun.websiteName}
                     </label>
					</li>
					</c:forEach>
					</ul>	
		</fieldset>	
	<fieldset>
    <legend>请勾选: </legend>
    <label for="checkbox-selectall">全选</label>
    <input type="checkbox" name="selectall" id="selectall" onchange="checkboxGetAll(this)">
    </fieldset>		
					
				<!-- </div> -->
				<br>
				<div class="items">
					<input type="button" class="btn btn-saves" value='提交' onclick="formsubmittest()"/>
					<input  type="reset" class="btn btn-saves"  value='取消'  onclick="closedDialog();"/>
				</div>
			</div>
		</section>
</form>

<!-- -界面UI必须 -->
<script type="text/javascript" src="AdminPages/source/jqueryui/jquery.js"></script>
<script type="text/javascript" src="AdminPages/source/jqueryui/jquery-ui.min.js"></script>
<!-- <script type="text/javascript" src="AdminPages/source/js/jquery.min.js"></script> -->
<!-- <script type="text/javascript" src="AdminPages/source/js/ui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="AdminPages/source/js/ui/easyui.myvalidator.js"></script> -->
<!-- -界面UI必须 -->

<script type="text/javascript">
     //页面初始化
	$(function(){
	//设置数组
     $("#sortable").sortable({
     grid:[8,8],//
     opacity: 0.9, //不透明度。从 0.01 到 1
     revert: true,  //当设置为 true，该项目将会使用动画，动画使用默认的持续时间。
     scroll: false, //如果设置为 true ，当到达边缘时页面会出现滚动条。false
     tolerance: "pointer",//指定用于测试项目被移动时是否覆盖在另一个项目上的模式
     items: ">li",//指定元素内的哪一个项目应是 sortable。
     update:function(event,ui){  //更新排序之后
     alert(ui.item);//把排序的ID弹出
     var text="排序为：";
     $("li input").each(function(i,elment){
     console.log("index====" +i);
     console.log("value====" +elment.id);
     text = text+$(this).attr("id")+" ";
           //text = text+ui.item.attr("id")+" ";
      });
    alert(text);//把排序的ID弹出
    }
    });
    //禁用选择,防止拖拽时选中文本内容！
    $("#sortable").disableSelection(); 
    });
     function formsubmittest(){
     //序列化 sortable 的项目 id 为一个字符串的数组
     var sortedIDs = $("#sortable").sortable("toArray");
     alert(sortedIDs.length);
     alert(sortedIDs);
     var sorted = $("#sortable").sortable("serialize",{key:"sort"});
     //var sorted = $("#sortable").sortable("serialize");
     alert("sorted="+sorted);
     //var sorted2=decodeURIComponent(sorted,true);
     var sorted2=decodeURIComponent(sorted);
     alert("sorted2="+sorted2);
    for(var ss in sortedIDs){
       //alert(ss);
       console.log("id====" +ss);
       //console.log("id====" +ss.attribute("id"));
     }
     /* $.each(sortedIDs, function(i, item) {
     console.log(i + "====" + item.text());
     $.each(item, function(j, val) {
     console.log(j + "====" + val);
     });
     } 
     );*/


     }
     
     //勾选所有的
     function checkboxGetAll(checkbox){
     var checkboxlist=$("input[type='checkbox']");
     if (checkbox.checked == true){
     alert('选中');
     if(checkboxlist.length>0){
     for(var i=0;i<checkboxlist.length;i++){
     var checkb=checkboxlist[i];
     checkb.checked=true;
     }
     }
     
     }else{
     alert('取消');
     if(checkboxlist.length>0){
     for(var i=0;i<checkboxlist.length;i++){
     var checkb=checkboxlist[i];
     checkb.checked=false;
     }
     }
     }
     }

</script>
</body>

</html>

页面效果如下图：