核心提示：HTML!doctype htmlhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8meta name=view...
HTML
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>目录</title>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui/jquery-ui.css">
<script src="../js/jquery-1.12.4.js"></script>
<script src="../css/jquery-ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="../css/main.css">
<link rel="stylesheet" type="text/css" href="../css/ebookMaker/wxPictureContentsEdit2.css">
</head>
<body>
<!-- 头部样式 -->
<p class="Top">
<a href="wxPictureCutpicAdd.html" class="BtnBack"></a>
<a href="EditRemove.html" class="BtnPublish" ><p class="EditOrd">发布</p></a>
<a href="avascript:void(0)" class="BtnSee" ><p class="EditOrd">预览</p></a>
<h1>目录</h1>
</p>
<p class="WxBookContent">
<!-- <p class="FormItemEdit">
<input type="text" class="TextBox" placeholder="红瓦绿树，碧海蓝天" id="text">
<a href="javascript：void(0)" class="BtnClear" onclick="javascript：document.getElementById('text').value=''"></a>
</p> -->
<p class="InputTips">
<p>说明: 拖动可排序, 点击可编辑</p>
</p>
</p>
<p class="WxBookContentEdit" id="OuterWrap">
<a href="javascript：void(0)">
<p class="FormItemListEdit">
<p class="EditContent">书名及封面</p>
<a href="javascript：void(0)" class="RightContent">已设置</a>
</p>
</a>
<a href="javascript：void(0)">
<p class="FormItemListEdit">
<p class="EditContent">内容简介</p>
<a href="javascript：void(0)" class="RightContentNumCenter">0字</a>
</p></a>
<a href="javascript：void(0)">
<p class="FormItemListEdit">
<p class="EditContent">概览</p>
<a href="javascript：void(0)" class="RightContentNumCenter">0字</a>
</p></a>
<p class="FormItemListEdit" id="FormItemListEditCollapse">
<a href="javascript：void(0)">
<p class="EditContent">
<a href="javascript：void(0)" class="EditContentImg"></a>准备工作
</p></a>
<a href="javascript：void(0)" class="RightContentImg"></a>
<p class="RightContentImgAdd">
<p class="Entry">
<p class="EntryTrangle"></p>
<a class="AddChapter"href="javascript：void(0)"><p>添加章</p></a>
<a class="AddSection" href="javascript：void(0)"><p>添加节</p></a>
<a class="DeleteColumn"href="javascript：void(0)"><p>删除</p></a>
</p>
</p>
<a href="javascript：void(0)" class="RightContentNum">0字</a>
</p>
<p class="FormItemListEdit2">
<p class="EditContent">安排行程规划</p>
<a href="javascript：void(0)" class="RightContentImg"></a>
<a href="javascript：void(0)" class="RightContentNum">0字</a>
</p>
<p class="FormItemListEdit2">
<p class="EditContent">
购机票、定酒店</p>
<a href="javascript：void(0)" class="RightContentImg"></a>
<a href="javascript：void(0)" class="RightContentNum">0字</a>
</p>
<p class="FormItemListEdit" id="FormItemListEditCollapse">
<a href="javascript：void(0)">
<p class="EditContent">
<a href="javascript：void(0)" class="EditContentImg"></a>出发啦
</p></a>
<a href="javascript：void(0)" class="RightContentImg"></a>
<p class="RightContentImgAdd">
<p class="Entry">
<p class="EntryTrangle"></p>
<a class="AddChapter"href="javascript：void(0)"><p>添加章</p></a>
<a class="AddSection" href="javascript：void(0)"><p>添加节</p></a>
<a class="DeleteColumn"href="javascript：void(0)"><p>删除</p></a>
</p>
</p>
<a href="javascript：void(0)" class="RightContentNum">0字</a>
</p>
<a href="javascript：void(0)">
<p class="FormItemListEdit">
<p class="EditContent">再见，青岛</p>
<a href="javascript：void(0)" class="RightContentImg"></a>
<p class="RightContentImgAdd">
<p class="Entry">
<p class="EntryTrangle"><!--本Div只来实现三角形，无其他作用--></p>
<a class="AddChapter"href="javascript：void(0)"><p>添加章</p></a>
<a href="javascript：void(0)"><p>添加节</p></a>
<a href="javascript：void(0)"><p>删除</p></a>
</p>
</p>
<a href="javascript：void(0)" class="RightContentNum">0字</a>
</p></a>
</p>
<script type="text/javascript">
$(function(){
$(".RightContentImg").parent().siblings("p").not(".RightContentImgAdd").css("display","block");
$(".AddChapter").click(function () {
var p = '<p class="FormItemListEdit" id="FormItemListEditCollapse">'+
'<a href="javascript：void(0)"><p class="EditContent">'+
'<a href="javascript：void(0)" class="EditContentImg"></a>准备工作</p></a>'+
'<a href="javascript：void(0)" class="RightContentImg"></a>'+
'<p class="RightContentImgAdd"><p class="Entry"><p class="EntryTrangle"></p>'+
'<a class="AddChapter"href="javascript：void(0)"><p>添加章</p></a>'+
'<a class="AddSection" href="javascript：void(0)"><p>添加节</p></a>'+
'<a class="DeleteColumn"href="javascript：void(0)"><p>删除</p></a></p></p>'+
'<a href="javascript：void(0)" class="RightContentNum">0字</a></p>';
$("#FormItemListEditCollapse").parent().append(p);
});
$(".AddSection").click(function () {
var p = '<p class="FormItemListEdit3">'+
'<p class="EditContent">安排行程规划</p>'+
'<a href="javascript：void(0)" class="RightContentImg"></a>'+
'<p class="RightContentImgAdd">'+
'<p class="Entry">'+
'<p class="EntryTrangle"></p>'+
'<a class="AddChapter"href="javascript：void(0)"><p>添加章</p></a>'+
'<a href="javascript：void(0)"><p>添加节</p></a>'+
'<a href="javascript：void(0)"><p>删除</p></a></p></p>'+
'<a href="javascript：void(0)" class="RightContentNum">0字</a></p>'+
'<p class="FormItemListEdit3"><p class="EditContent">购机票、定酒店</p>'+
'<a href="javascript：void(0)" class="RightContentImg"></a>'+
'<a href="javascript：void(0)" class="RightContentNum">0字</a></p>';
$(this).parent().parent().parent().append(p);
});
/*colapese*/
$(".EditContentImg").click(function(){
if($(this).parent().siblings("p").not(".RightContentImgAdd").css("display")=="none"){
$(this).parent().siblings("p").not(".RightContentImgAdd").show();
}else{
$(this).parent().siblings("p").not(".RightContentImgAdd").hide();
}
})
$(".RightContentImg").click(function(){
if($(this).siblings("p").not(".FormItemListEdit3").css("display")=="none"){
$(this).siblings("p").not(".FormItemListEdit3").show();
}else{
$(this).siblings("p").not(".FormItemListEdit3").hide();
}
})
/*移除元素*/
$(".DeleteColumn").click(function(){
$(this).parents(".FormItemListEdit").remove();
/*排序功能*/
})
})
/*function $(id) {
return document.getElementById(id);
}
*/
//获取鼠标位置
/*function getMousePos (e) {
return{
x:e.pageX || e.clientX +document.body.scrollLeft,
y:e.pageY || e.clientY +document.body.scrollTop
}
}
*/
//获取元素的位置
/*function getElementPos(el){
return {
x : el.offsetParent ? el.offsetLeft + arguments.callee(el.offsetParent)['x'] : el.offsetLeft,
y : el.offsetParent ? el.offsetTop + arguments.callee(el.offsetParent)['y'] : el.offsetTop
}
} */
//获取元素尺寸
/*function getElementSize(el){
return {
width : el.offsetWidth,
height : el.offsetHeight
}
}
*/
//禁止选择
/*document.onselectstart = function(){
return false;
} */
//判断是否有挪动
/*var MOVE = {};
MOVE.isMove = false;
//创建的标杆（标志移动位置）
var p = document.createElement('p');
p.style.width = '400px';
p.style.height = '1px';
p.style.fontSize = '0';
p.style.background = 'red';
*/
/*touchstart touchmove touchend*/
//获取列表顺序
/*var OuterWrap=$("OuterWrap");
OuterWrap.ontouchstart=function(event) {
var lis=OuterWrap.getElementsByClassName("FormItemListEdit");
for(var i=0;i<lis.length;i++){
lis[i]['pos'] = getElementPos(lis[i]);
lis[i]['size'] = getElementSize(lis[i]);
}
}
event = event || window.event;
var t = event.target || event.srcElement;
if(t.tagName.toLowerCase() == 'a'){
var p = getMousePos(event);
var el = t.cloneNode(true);
el.style.position = 'absolute';
el.style.left = t.pos.x + 'px';
el.style.top = t.pos.y + 'px';
el.style.width = t.size.width + 'px';
el.style.height = t.size.height + 'px';
document.body.appendChild(el);
document.touchmove = function(event){
event = event || window.event;
var current = getMousePos(event);
el.style.left =t.pos.x + current.x - p.x + 'px';
el.style.top =t.pos.y + current.y - p.y+ 'px';
document.body.style.cursor = 'move';
}}
*/
//判断插入点
/*for(var i = 0; i < lis.length; i++){
if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']/2){
if(t != lis[i]){
MOVE.isMove = true;
OuterWrap.insertBefore(p,lis[i]);
}
}else if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] + lis[i]['size']['height']/2 && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']){
if(t != lis[i]){
MOVE.isMove = true;
OuterWrap.insertBefore(p,lis[i].nextSibling);
}
} */
//移除事件
/*document.touchend = function(event){
event = event || window.event;
document.onmousemove = null;
if(MOVE.isMove){
OuterWrap.replaceChild(t,p);
MOVE.isMove = false;
}
document.body.removeChild(el);
el = null;
document.body.style.cursor = 'normal';
document.touchend = null;
}
} */
</script>
</body>
</html>
CSS
body{
margin:0px auto;
background:#efeff4;
position:relative;
display:block;
padding:44px 0px 64px 0px;
}
/* 头部样式 */
.Top .BtnPublish{
height:44px;
float:right;
padding-right:10px;
font-size:16px;
color:#228924;
line-height:44px;
}
.Top .BtnSee{
height:44px;
float:right;
padding-right:20px;
font-size:16px;
color:#d6d6d7;
line-height:44px;
}
/* 目录书名 */
.WxBookContent{
padding-top: 16px;
}
.WxBookContent .FormItemEdit {
background: #ffffff;
padding: 0px 26px;
margin-bottom: 10px;
position: relative;
}
.WxBookContent .FormItemEdit:before {
content: " ";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
border-top: 1px solid #d9d9d9;
color: #d9d9d9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 5;
}
.WxBookContent .FormItemEdit:after {
content: " ";
position: absolute;
left: 0px;
bottom: 0px;
right: 0px;
border-bottom: 1px solid #d9d9d9;
color: #d9d9d9;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 5;
}
.WxBookContent .InputTips {
font-size: 14px;
line-height: 1.7;
color: #888888;
padding: 0px 16px;
margin-bottom: 10px;
text-align: center;
}
.WxBookContent .FormItemEdit .TextBox {
height: 24px;
width: 100%;
border: 0px;
border-radius: 0px;
line-height: 24px;
padding: 10px 0px;
font-size: 16px;
font-weight: normal;
}
.WxBookContent .FormItemEdit .BtnClear {
width: 44px;
height: 44px;
background: url(../images/Mobile_bg0215.png) center center no-repeat;
background-size: 16px 16px;
position: absolute;
right: 0px;
top: 0px;
}
/* 编辑内容 */
.WxBookContentEdit{
padding-top: 0px;
}
.WxBookContentEdit .FormItemListEdit {
background: #ffffff;
padding: 0px 26px;
position: relative;
}
.WxBookContentEdit .FormItemListEdit:after {
content: " ";
position: absolute;
left: 15px;
bottom: 0px;
right: 0px;
border-bottom: 1px solid #d9d9d9;
color: #d9d9d9;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 5;
}
/* p设置真实高度，由此才会撑起来 */
.WxBookContentEdit .FormItemListEdit .EditContent {
height: 24px;
line-height: 24px;
width: 100%;
border: 0px;
border-radius: 0px;
padding: 10px 0px;
font-size: 16px;
font-weight: normal;
color:#333333;
}
.EditContent .EditContentImg{
width: 10px;
height: 10px;
background: url(../images/Mobile_bg0298.png) center center no-repeat;
background-size: 10px 10px;
position: absolute;
left: 10px;
top: 17px;
}
/* 右边的图标是绝对定位 */
.WxBookContentEdit .FormItemListEdit .RightContent {
line-height: 44px;
position: absolute;
right: 15px;
top: 0px;
font-size: 14px;
color:#a1a1a1;
}
.WxBookContentEdit .FormItemListEdit .RightContentNumCenter {
/* line-height: 54px; */
position: absolute;
right: 15px;
top: 14px;
font-size: 12px;
color:#a1a1a1;
}
.WxBookContentEdit .FormItemListEdit .RightContentNum {
/* line-height: 54px; */
position: absolute;
right: 15px;
top: 20px;
font-size: 12px;
color:#a1a1a1;
}
.WxBookContentEdit .FormItemListEdit .RightContentImg {
width: 10px;
height: 5px;
background: url(../images/Mobile_bg0297.png) center center no-repeat;
background-size: 10px 5px;
position: absolute;
right: 15px;
top: 10px;
}
/* 按钮触发事件1 */
.WxBookContentEdit .FormItemListEdit2 {
background: #ffffff;
padding: 0px 0px;
position: relative;
display: none;
}
.WxBookContentEdit .FormItemListEdit2:after {
content: " ";
position: absolute;
left: 0px;
bottom: 0px;
right: 0px;
border-bottom: 1px solid #d9d9d9;
color: #d9d9d9;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 5;
}
.WxBookContentEdit .FormItemListEdit2 .EditContent {
height: 24px;
line-height: 24px;
width: 100%;
border: 0px;
border-radius: 0px;
padding-top: 10px;
padding-left:-40px;
font-size: 16px;
font-weight: normal;
color:#333333;
}
.WxBookContentEdit .FormItemListEdit2 .RightContent {
line-height: 44px;
position: absolute;
right: 0px;
top: 0px;
font-size: 14px;
color:#a1a1a1;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentNum {
position: absolute;
right: -10px;
top: 20px;
font-size: 12px;
color:#a1a1a1;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentImg {
width: 10px;
height: 10px;
background: url(../images/Mobile_bg0297.png) center center no-repeat;
background-size: 10px 5px;
position: absolute;
right: -10px;
top: 10px;
}
/* */
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd{
position: absolute;
right: 5px;
top: 20px;
z-index: 6;
display: none;
color: #ffffff;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .Entry{
width:85px;
background-color:#49484b;
margin-top: 4px;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .EntryTrangle{
position: absolute;
right:9px;
top: -3px;
width: 0px;
height: 0px;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom: 7px solid #49484b;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .Entry p{
font-size: 16px;
padding-top:15px;
padding-bottom:15px;
padding-left:15px;
color: #ffffff;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .RightContentImgAddEdit{
padding: 5px 10px;
display: block;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .RightContentImgAddEdit p{
position: absolute;
left: 11px;
top: 0px;
font-size: 16px;
z-index: 6;
display: none;
color: red;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd{
position: absolute;
right: 5px;
top: 20px;
z-index: 6;
display: none;
}
/* 按钮触发事件2 */
.WxBookContentEdit .FormItemListEdit2 {
background: #ffffff;
padding: 6px 41px;
position: relative;
display: none;
}
.WxBookContentEdit .FormItemListEdit2:after {
content: " ";
position: absolute;
left: 0px;
bottom: 0px;
right: 0px;
border-bottom: 1px solid #d9d9d9;
color: #d9d9d9;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 5;
}
.WxBookContentEdit .FormItemListEdit2 .EditContent {
height: 24px;
line-height: 24px;
width: 100%;
border: 0px;
border-radius: 0px;
padding-top: 10px;
padding-left:-40px;
font-size: 16px;
font-weight: normal;
color:#333333;
}
.WxBookContentEdit .FormItemListEdit2 .RightContent {
line-height: 44px;
position: absolute;
right: 0px;
top: 0px;
font-size: 14px;
color:#a1a1a1;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentNum {
position: absolute;
right: 16px;
top: 20px;
font-size: 12px;
color:#a1a1a1;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentImg {
width: 10px;
height: 10px;
background: url(../images/Mobile_bg0297.png) center center no-repeat;
background-size: 10px 5px;
position: absolute;
right: 16px;
top: 10px;
}
/* */
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd{
position: absolute;
right: 5px;
top: 20px;
z-index: 6;
display: none;
color: #ffffff;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .Entry{
width:85px;
background-color:#49484b;
margin-top: 4px;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .EntryTrangle{
position: absolute;
right:9px;
top: -3px;
width: 0px;
height: 0px;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom: 7px solid #49484b;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .Entry p{
font-size: 16px;
padding-top:15px;
padding-bottom:15px;
padding-left:15px;
color: #ffffff;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .RightContentImgAddEdit{
padding: 5px 10px;
display: block;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .RightContentImgAddEdit p{
position: absolute;
left: 11px;
top: 0px;
font-size: 16px;
z-index: 6;
display: none;
color: red;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd{
position: absolute;
right: 5px;
top: 20px;
z-index: 6;
display: none;
}
/* 按钮触发事件3 */
.WxBookContentEdit .FormItemListEdit3 {
background: #ffffff;
padding: 0px 19px;
position: relative;
display: none;
}
.WxBookContentEdit .FormItemListEdit3:after {
content: " ";
position: absolute;
left: 0px;
bottom: 0px;
right: 0px;
border-bottom: 1px solid #d9d9d9;
color: #d9d9d9;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 5;
}
.WxBookContentEdit .FormItemListEdit3 .EditContent {
height: 24px;
line-height: 24px;
width: 100%;
border: 0px;
border-radius: 0px;
padding-top: 10px;
padding-left:-40px;
font-size: 16px;
font-weight: normal;
color:#333333;
}
.WxBookContentEdit .FormItemListEdit3 .RightContent {
line-height: 44px;
position: absolute;
right: 0px;
top: 0px;
font-size: 14px;
color:#a1a1a1;
}
.WxBookContentEdit .FormItemListEdit3 .RightContentNum {
position: absolute;
right: -10px;
top: 20px;
font-size: 12px;
color:#a1a1a1;
}
.WxBookContentEdit .FormItemListEdit3 .RightContentImg {
width: 10px;
height: 10px;
background: url(../images/Mobile_bg0297.png) center center no-repeat;
background-size: 10px 5px;
position: absolute;
right: -10px;
top: 10px;
}
/* 添加章、节、删除 */
.WxBookContentEdit .FormItemListEdit .RightContentImgAdd{
position: absolute;
right: 5px;
top: 20px;
z-index: 6;
display: none;
color: #ffffff;
}
.WxBookContentEdit .FormItemListEdit .RightContentImgAdd .Entry{
width:85px;
background-color:#49484b;
margin-top: 4px;
}
.WxBookContentEdit .FormItemListEdit .RightContentImgAdd .EntryTrangle{
position: absolute;
right:9px;
top: -3px;
width: 0px;
height: 0px;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom: 7px solid #49484b;
}
.WxBookContentEdit .FormItemListEdit .RightContentImgAdd .Entry p{
font-size: 16px;
padding-top:15px;
padding-bottom:15px;
padding-left:15px;
color: #ffffff;
}
.WxBookContentEdit .FormItemListEdit .RightContentImgAdd .RightContentImgAddEdit{
padding: 5px 10px;
display: block;
}
.WxBookContentEdit .FormItemListEdit .RightContentImgAdd .RightContentImgAddEdit p{
position: absolute;
left: 11px;
top: 0px;
font-size: 16px;
z-index: 6;
display: none;
color: red;
}
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd{
position: absolute;
right: 5px;
top: 20px;
z-index: 6;
display: none;
}
