JQuery UI Sortable拖动排序布局使用入门（一）
admin 2019-11-17 11:20:57 888人已围观
最近在学习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
标签云
点击排行榜
- 支付行业常用名词术语解释
备付金存管银行是指可以为支付机构办理客户备付金的跨行收付业务，并负责对支付机构存放在所有备付金银行的客户备付金信息进行归集、核对与监督的备付金银行。(支付机构客 - CentOS服务器上mysql数据库优化过程分析（一）
最近有一套生产系统的数据库CPU老是偏高，发现闲时也在40%-60%左右，感觉很不正常，决定优化一下，在这 - 一元购模式分享
首先需要知道什么叫一元购？ 就是你支付一元后获得一个购物资格，有的叫抽
官方微信公众号
内有1000G各行业资料