JQuery UI Sortable拖动排序布局使用入门(一)
admin 2019-11-17 11:20:57 866人已围观
最近在学习JQuery UI Sortable拖动排序布局,想在www.onekbit.com 上实现一个自定义拖拽式布局的页面,特将自己学习过程记录下来,重要信息如下:
官方网址:https://jqueryui.com/sortable/#display-grid
中文文档:https://www.runoob.com/jqueryui/api-sortable.html
网页代码如下:
<!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>
页面效果如下图:
具体功能可以登录www.onekbit.com后台进入自定义网址导航页排版查看。
分享到:
编辑发布时间:2019-11-17 11:20:57