examples/PHILLYXDEMOS/sortable/sort3.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>sortable</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.css" />
		<style type="text/css">
			i {
				font-style: normal;
			}
			ul {
				list-style: none;
				margin: 10px 5px;
				padding: 0;
				overflow: auto;
				min-height: 400px;
			}
			ul li {
				float: left;
			}
			.img-father {
				position: relative;
				padding: 10px;
			}
			.img-father .img-container {
				height: 80px;
				width: 80px;
			}
			.img-father .img-container img {
				width: 100%;
				height: 100%;
				vertical-align: middle;
				object-fit: cover;
				/*border-top-left-radius: 3px;
				border-top-right-radius: 3px;*/
				
				border-radius: 3px;
			}
			.img-father .img-content {
				background-color: #F5F5F5;
				box-shadow: 1px 0 1px #CCCCCC, -1px 0 1px #CCCCCC;
				z-index: 10;
				text-indent: 2px;
				height: 21px;
				line-height: 21px;
				overflow: hidden;
				border-bottom-left-radius: 3px;
				border-bottom-right-radius: 3px;
			}
			.img-father .img-index {
				position: absolute;
				z-index: 9;
				right: 15px;
				bottom:15px ;
				font-size: 14px;
				height: 14px;
				width: 14px;
				line-height: 14px;
				text-align: center;
				color: white;
				margin-left: -8px;
				margin-top: -8px;
			}
			.img-father .img-remove {
				display: none;
				position: absolute;
				top: 4px;
				left: 4px;
				color: white;
				background: #101010;
				border-radius: 50%;
				font-size: 14px;
				border: 1px solid white;
				font-weight: 1000;
				height: 16px;
				width: 16px;
				line-height: 14px;
				text-align: center;
			}
			.shake {
				-webkit-transform-origin: center center;
				-webkit-animation-name: shake-rotate;
				-webkit-animation-duration: 0.5s;
				-webkit-animation-timing-function: linear;
				-webkit-animation-iteration-count: infinite;
			}
			.shakecontainer .img-container img {
				border: 1px solid #CCCCCC;
				border-radius: 6px;
			}
			.shakecontainer .img-content {
				display: none;
			}
			.shakecontainer .img-remove,
			.shakecontainer .img-index {
				display: block;
			}
			ul li[draggable=true] {
				transform: scale(1.2);
				-webkit-transform: scale(1.2);
			}
			ul li[draggable=true]>div {
				-webkit-animation-name: none;
			}
			ul li[draggable=true] .img-remove,
			ul li[draggable=true] .img-index {
				display: none;
			}
			.sort-handle {
				cursor: move;
				cursor: -webkit-grabbing;
			}
			.sort-ghost {
				opacity: 0;
			}
			.sort-chosen {
				transform: scale(1.2);
				-webkit-transform: scale(1.2);
				transition: transform .3s;
				-webkit-transition: transform .3s;
			}
			.sort-chosen:last-child {
				transition: none;
				-webkit-transition: none;
			}
			@-webkit-keyframes shake-rotate {
				0% {
					-webkit-transform: rotate(0deg);
				}
				12.5% {
					-webkit-transform: rotate(1.25deg);
				}
				25% {
					-webkit-transform: rotate(2.5deg);
				}
				37.5% {
					-webkit-transform: rotate(1.25deg);
				}
				50% {
					-webkit-transform: rotate(0deg);
				}
				62.5% {
					-webkit-transform: rotate(-1.25deg);
				}
				75% {
					-webkit-transform: rotate(-2.5deg);
				}
				87.5% {
					-webkit-transform: rotate(-1.25deg);
				}
				100% {
					-webkit-transform: rotate(0deg);
				}
			}
			@media only screen and (min-width: 321px) and (max-width: 375px) {
				ul {
					margin-left: 8%;
				}
			}
		</style>
		<link rel="stylesheet" type="text/css" href="../css/preview.css" />

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">sortable</h1>
			<button type="button" id="btnorder" class="mui-btn mui-btn-blue mui-pull-right mui-btn-link">排序 | 删除</button>
		</header>
		<div class="mui-content">
			<p style="margin: 10px;">
				在参考了两款app的排序效果[界面(jiemian.com)、UC浏览器安卓版(ucweb.com)]后，
				<br />发现目前的sortable.js和原生的排序效果还有一定的差异，
				<br />主要有以下三点：
				<br/> 1.在移动端如果滑动排序的速度很快，有闪烁效果
				<br />2.排序时没有延时,targetEl在dragEl刚drop时就开始移动了
				<br />3.targetEl和dragEl间的兄弟结点移动时没有动画
				<br /> 为了接近或达到原生的排序效果，更改了sortable.js,具体见代码
			</p>
			<ul id="ul_imgs">

				<li data-li="1">
					<div class="img-father">
						<div class="img-container drag-handle">
							<img class="item" src="../images/face/face-01.jpg" data-preview-src="" data-preview-group="1" />
						</div>
						<div class="img-content">
							<p>face-01</p>
						</div>
						<i class="img-index">1</i>
						<i class="img-remove">×</i>
					</div>
				</li>
				<li data-li="2">
					<div class="img-father">
						<div class="img-container drag-handle">
							<img class="item" src="../images/face/face-02.jpg" data-preview-src="" data-preview-group="1" />
						</div>
						<div class="img-content">
							<p>face-02</p>
						</div>
						<i class="img-index">2</i>
						<i class="img-remove ">×</i>
					</div>
				</li>
				<li data-li="3">
					<div class="img-father">
						<div class="img-container drag-handle">
							<img class="item" src="../images/face/face-03.jpg" data-preview-src="" data-preview-group="1" />
						</div>
						<div class="img-content">
							<p>face-03</p>
						</div>
						<i class="img-index">3</i>
						<i class="img-remove ">×</i>
					</div>
				</li>
				<li data-li="4">
					<div class="img-father">
						<div class="img-container drag-handle">
							<img class="item" src="../images/face/face-04.jpg" data-preview-src="" data-preview-group="1" />
						</div>
						<div class="img-content">
							<p>face-04</p>
						</div>
						<i class="img-index">4</i>
						<i class="img-remove">×</i>
					</div>
				</li>
			</ul>

		</div>

	</body>
	<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/Sortable-edit.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.zoom.js"></script>
	<script src="../js/mui.previewimage.js"></script>
	<script src="../js/template-native.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/html" id="tmpl">
		<% for(var i=1;i<10;i++){ %>
			<li data-li="<%=i%>">
				<div class="img-father">
					<div class="img-container drag-handle">
						<img class="item" src="../images/face/face-0<%=i%>.jpg" data-preview-src="" data-preview-group="1" data-content='face-0<%=i%>'/>
					</div>
					<!--<div class="img-content">
						<p>face-0
							<%=i%>
						</p>
					</div>-->
					<i class="img-index"><%=i%></i>
					<i class="img-remove">×</i>
				</div>
			</li>
			<% } %>
	</script>
	<script type="text/javascript">
		var sort;
		mui.init({
			gestureConfig: {
				longtap: true,
			}
		});
		var ispaixu = false;
		mui.ready(function() {
			//妈蛋，吐槽一下tamplate.js,不传渲染对象报错，居然没有容错机制。。。。
			var html = template('tmpl', {});
			document.getElementById("ul_imgs").innerHTML = html;
			mui.previewImage();
			document.getElementById("btnorder").addEventListener('tap', function() {
				init(false, true);
			});
			[].forEach.call(document.querySelectorAll(".img-remove"), function(item, index) {
				item.addEventListener('tap', function() {
					this.parentNode.parentNode.removeChild(this.parentNode);
				});
			});
			mui("ul li").on('longtap', 'img', function() {
				if (document.querySelector("ul li .img-father").className.indexOf('shake') != -1)
					return;
				initForSort(false);
			});
			setSortable(false);
		});

		function init(islongtap, isTriggerByBtn) {
			if (!ispaixu) {
				if (isTriggerByBtn) {
					mui("ul li .img-father").each(function() {
						this.classList.add('shakecontainer');
						this.classList.add('shake');
					});
					document.getElementById("btnorder").innerText = '完成';
				}!sort && setSortable(isTriggerByBtn);
				ispaixu = true;
			} else {
				if (islongtap) return;
				ispaixu = false;
				document.getElementById("btnorder").innerText = '排序 | 删除';
				mui("ul li .img-father").each(function() {
					this.classList.remove('shakecontainer');
					this.classList.remove('shake');
				});
			}
		};

		function initForSort(isTriggerByBtn) {
			if (isTriggerByBtn) return;
			mui("ul li .img-father").each(function() {
				this.classList.add('shakecontainer');
				this.classList.add('shake');
			});
			document.getElementById("btnorder").innerText = '完成';
			ispaixu = true;
		};
		var touchtime, item_offset = {
			left: '',
			top: ''
		};

		function setSortable(isTriggerByBtn) {
			sort = new Sortable(document.getElementById("ul_imgs"), {
				chosenClass: 'sort-chosen',
				ghostClass: 'sort-ghost',
				delay: 150,
				animation: 400,
				handle: '.drag-handle',
				//-------- 自定义属性
				isDropAnimation: false, //DragDrop时是否对DragEl启用滑动效果
				ghostScale:1.2,//DragGhostEl 缩放效果
				//--------
				onStart: function( /**Event*/ evt) { // 拖拽
					touchtime = evt.timeStamp;
					item_offset.left = evt.item.offsetLeft;
					item_offset.top = evt.item.offsetTop;
					var itemEl = evt.item;
				},
				onEnd: function( /**Event*/ evt) { // 拖拽
					var itemEl = evt.item;
					var timespan = evt.timeStamp - touchtime;
					if (timespan < 200) {} else if (itemEl.offsetLeft == item_offset.left && itemEl.offsetTop == item_offset.top) {} else {
						reset_order();
					}
					touchtime = null;
				},
			});
		};

		function reset_order() {
			//重新进行排序
			[].forEach.call(document.querySelectorAll("#ul_imgs li"), function(item, index) {
				var li = item;
				li.setAttribute('new-data-li', index + 1);
				li.querySelector('.img-index').innerText = index + 1;
			});
		};
	</script>

</html>