使用jquery-ui实现手机上标签拖拽排序以及增加、删除。
实现效果如下图：
可添加新的标签。可拖拽更改顺序，以及删除。
设计思路：
声明两个数组，并放入数据，一个为已添加标签，一个为未添加标签。
编辑时使用 jquery-ui 的 .sortable() 方法。
.sortable()实例参考：https://www.runoob.com/jqueryui/example-sortable.html
再声明一个数组，记录拖拽、删除操作。点击保存时给已添加标签数组进行赋值。
删除的同时把删除的标签添加到未添加标签数组中。
添加标签将标签在当前数组中删除添加到已添加数组中。
将操作数组的所有方法各个封装。方便进行初始化。
下面为拖拽排序的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<style>
#content {
position: relative;
margin: 0 auto;
padding: 0;
width: 500px;
height: 500px;
background-color: #f2f2f2;
}
#edit, #edit_close, #edit_saver {
border: 1px solid #DDDDDD;
margin: 10px;
font-size: 20px;
padding: 5px 15px;
border-radius: 20px;
background-color: #3786FF;
color: #FFFFFF;
}
#edit_start {
display: none;
}
#sortable {
list-style-type: none;
padding: 0;
margin: 0;
}
#sortable li {
width: 68px;
height: 30px;
line-height: 30px;
margin: 5px;
padding: 5px 10px;
font-size: 20px;
float: left;
}
.css_menu {
position: relative;
border: 1px solid #DDDDDD;
border-radius: 21px;
text-align: center;
background-color: #FFFFFF;
color: #808080;
cursor: pointer;
}
.css_delete {
color: white;
line-height: 18px;
width: 18px;
font-size: 12px;
position: absolute;
top: -2px;
left: 75px;
background-color: red;
border-radius: 50%;
}
.css_delete::before {
content: 'X';
}
#add {
display: block;
width: 488px;
height: 40px;
margin: 0 auto;
border: 1px solid #DDDDDD;
background-color: green;
color: white;
font-size: 20px;
line-height: 38px;
padding: 0;
}
#add_start {
position: absolute;
top: 0px;
width: 500px;
height: 500px;
background-color: #F2F2F2;
display: none;
}
#add_start button {
float: right;
border: 0px;
padding: 10px;
}
#add_start ul {
width: 500px;
height: 500px;
list-style-type: none;
margin: 0;
padding: 0;
}
#add_start ul li {
width: 100%;
text-align: center;
padding: 5px 0;
border-bottom: 1px solid #DDDDDD;
border-top: 1px solid #DDDDDD;
}
</style>
</head>
<body>
<div id="content">
<button id="edit" type="button">编辑</button>
<div id="edit_start">
<button id="edit_close" type="button">取消</button>
<button id="edit_saver" type="button">保存</button>
</div>
<ul id="sortable"></ul>
<button id="add" type="button">添加</button>
<div id="add_start">
<button id="add_close" type="button">X</button>
<div style="clear: both;"></div>
<ul id="sortable_surplus"></ul>
</div>
</div>
<script type="text/javascript">
var sortable = document.getElementById('sortable');
var sortable_surplus = document.getElementById('sortable_surplus');
var menu = ['首页', '资讯', '财经', '娱乐', '体育', '时尚', '汽车', '房产', '科技', '读书', '小说', '文化', '历史', '军事', '博客', '彩票'];
var menu_surplus = ['宗教', '综艺', '舞蹈', '音乐'];
var edit = document.getElementById('edit');
var edit_start = document.getElementById('edit_start');
var edit_saver = document.getElementById('edit_saver');
var edit_close = document.getElementById('edit_close');
var css_menu = document.getElementsByClassName('css_menu');
var css_delete = document.getElementsByClassName('css_delete');
var add = document.getElementById('add');
var add_start = document.getElementById('add_start');
var add_close = document.getElementById('add_close');
var css_addmenu = document.getElementsByClassName('css_addmenu');
var edit_menu = new Array;
// 初始化
function init() {
// 默认隐藏
for(let i = 0; i < css_delete.length; i++) {
css_delete[i].style.display = 'none';
}
}
function init1() {
sortable.innerHTML = '';
var sortableHtml = '';
for(let i = 0; i < menu.length; i++) {
sortableHtml += '<li class="css_menu" id="'+ ('menu' + i) +'">'+ menu[i] + '<span class="css_delete" id="'+ ('delete' + i) +'"></span></li>';
}
sortable.innerHTML = sortableHtml;
}
function init2() {
sortable_surplus.innerHTML = '';
var sortableHtml_surplus = '';
for(let i = 0; i < menu_surplus.length; i++) {
sortableHtml_surplus += '<li class="css_addmenu" id="'+ ('menu_add' + i) +'">'+ menu_surplus[i] + '</li>';
}
sortable_surplus.innerHTML = sortableHtml_surplus;
}
function init_delete() {
// 删除
for(let i = 0; i < css_menu.length; i++) {
// 使用闭包，不然得到的都是 delete15
(function(i) {
var deletei = document.getElementById('delete' + i);
var menui = document.getElementById('menu' + i);
deletei.addEventListener('click', function() {
// 删除对应的 li
sortable.removeChild(menui);
menu_surplus.push(menu[i])
menu.splice(i,1);
init1();
init2();
init_delete();
init_add();
})
})(i)
}
}
function init_add() {
// 完成添加
for(let i = 0; i < css_addmenu.length; i++) {
(function(i) {
var menu_addi = document.getElementById('menu_add' + i);
menu_addi.addEventListener('click', function() {
// 删除对应的 li
add_start.style.display = 'none';
sortable_surplus.removeChild(menu_addi);
menu.push(menu_surplus[i]);
menu_surplus.splice(i,1);
// 初始化
init1();
init();
init2();
init_delete();
init_add();
})
})(i)
}
}
init1();
init();
init2();
init_delete();
init_add();
// 点击编辑事件
edit.addEventListener('click', function() {
$(function() {
$("#sortable").sortable();
});
edit_start.style.display = 'initial';
edit.style.display = 'none';
add.style.display = 'none';
for(let i = 0; i < css_delete.length; i++) {
css_delete[i].style.display = '';
}
// 初始化
init1();
init2();
init_delete();
init_add();
})
// 保存
edit_saver.addEventListener('click', function() {
for(let i = 0; i < css_menu.length; i++) {
edit_menu.push(css_menu[i].innerText);
}
menu = edit_menu;
edit_menu = [];
edit_start.style.display = 'none';
edit.style.display = 'initial';
add.style.display = 'block';
init1();
init();
init2();
init_delete();
init_add();
})
// 取消保存
edit_close.addEventListener('click', function() {
// 恢复初始状态
edit_start.style.display = 'none';
edit.style.display = 'initial';
add.style.display = 'block';
init1();
init();
init2();
init_delete();
init_add();
})
// 显示添加盒子
add.addEventListener('click', function() {
add_start.style.display = 'initial';
})
// 隐藏添加盒子
add_close.addEventListener('click', function() {
add_start.style.display = 'none';
})
</script>
</body>
</html>
扫码关注微信公众号，持续更新干货
170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
