jquery html5手機拖動效果手指觸屏拖動圖片排序代碼



105 416 139



特效描述:jquery html5手機拖動 手指觸屏拖動 圖片排序代碼,手機拖動效果手指觸屏拖動

代碼結構

1. 引入CSS

<link href="st/app.css" rel="stylesheet" type="text/css"/>
<link href="st/app.css" rel="stylesheet" type="text/css"/>

2. 引入JS

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/Sortable.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/Sortable.js"></script>

3. HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>適用于手機端觸屏拖動效果</title>
</head>
<body style="padding:80px 0 0 0;">
	<div class="container" style="height: 520px">
		<div data-force="30" class="layer block" style="left: 14.5%; top: 0; width: 37%">
			<div class="layer title">List A</div>
			<ul id="foo" class="block__list block__list_words">
				<li>бегемот</li>
				<li>корм</li>
				<li>антон</li>
				<li>сало</li>
				<li>железосталь</li>
				<li>валик</li>
				<li>кровать</li>
				<li>краб</li>
			</ul>
		</div>
		<div data-force="18" class="layer block" style="left: 58%; top: 143px; width: 40%;">
			<div class="layer title">List B</div>
			<ul id="bar" class="block__list block__list_tags">
				<li>казнить</li>
				<li>,</li>
				<li>нельзя</li>
				<li>помиловать</li>
			</ul>
		</div>
	</div>
	<div class="container">
		<div id="multi" style="margin-left: 30px">
			<div><div data-force="5" class="layer title title_xl">Multi</div></div>
			<div class="layer tile" data-force="30">
				<div class="tile__name">Group A</div>
				<div class="tile__list">
					<img src="st/face-01.jpg"/><!--
					--><img src="st/face-02.jpg"/><!--
					--><img src="st/face-03.jpg"/><!--
					--><img src="st/face-04.jpg"/>
				</div>
			</div>
			<div class="layer tile" data-force="25">
				<div class="tile__name">Group B</div>
				<div class="tile__list">
					<img src="st/face-05.jpg"/><!--
					--><img src="st/face-06.jpg"/><!--
					--><img src="st/face-07.jpg"/>
				</div>
			</div>
			<div class="layer tile" data-force="20">
				<div class="tile__name">Group C</div>
				<div class="tile__list">
					<img src="st/face-08.jpg"/><!--
					--><img src="st/face-09.jpg"/>
				</div>
			</div>
		</div>
	</div>
	<div class="container" style="margin-top: 100px">
		<div id="filter" style="margin-left: 30px">
			<div><div data-force="5" class="layer title title_xl">Editable list</div></div>
			<div style="margin-top: -8px; margin-left: 10px" class="block__list block__list_words">
				<ul id="editable">
					<li>Оля<i class="js-remove">?</i></li>
					<li>Владимир<i class="js-remove">?</i></li>
					<li>Алина<i class="js-remove">?</i></li>
				</ul>
				<button id="addUser">Add</button>
			</div>
		</div>
	</div>
	<div class="container" style="margin-top: 100px;">
		<div id="advanced" style="margin-left: 30px;">
			<div><div data-force="5" class="layer title title_xl">Advanced groups</div></div>
			<div style="width: 25%; float: left; margin-top: 15px; margin-left: 10px" class="block__list block__list_words">
				<div class="block__list-title">pull & put</div>
				<ul id="advanced-1">
					<li>Meat</li>
					<li>Potato</li>
					<li>Tea</li>
				</ul>
			</div>
			<div style="width: 25%; float: left; margin-top: 15px; margin-left: 10px" class="block__list block__list_words">
				<div class="block__list-title">only pull (clone), no reordering</div>
				<ul id="advanced-2">
					<li>Sex</li>
					<li>Drugs</li>
					<li>Rock'n'roll</li>
				</ul>
			</div>
			<div style="width: 25%; float: left; margin-top: 15px; margin-left: 10px" class="block__list block__list_words">
				<div class="block__list-title">only put</div>
				<ul id="advanced-3">
					<li>Money</li>
					<li>Force</li>
					<li>Agility</li>
				</ul>
			</div>
			<div style="clear: both"></div>
		</div>
	</div>
	<div class="container" style="margin-top: 100px;">
		<div id="handle" style="margin-left: 30px;">
			<div><div data-force="5" class="layer title title_xl">Drag handle and selectable text</div></div>
			<div style="width: 30%; margin-left: 10px" class="block__list_words">
				<ul id="handle-1">
					<li><span class="drag-handle">&#9776;</span>Select text freely</li>
					<li><span class="drag-handle">&#9776;</span>Drag my handle</li>
					<li><span class="drag-handle">&#9776;</span>Best of both worlds</li>
				</ul>
			</div>
			<div style="clear: both"></div>
		</div>
	</div>
	<div class="container" style="margin-top: 100px">
		<div style="margin-left: 30px">
			<div><div class="layer title title_xl">Code example</div></div>
			<pre data-force="100" class="layer javascript" style="margin-top: -8px; margin-left: 10px; width: 90%"><code>// Simple list
var list = document.getElementById("my-ui-list");
new Sortable(list); // That's all.
// Grouping
var foo = document.getElementById("foo");
new Sortable(foo, { group: "omega" });
var bar = document.getElementById("bar");
new Sortable(bar, { group: "omega" });
// Or
var container = document.getElementById("multi");
var sort = new Sortable(container, {
  animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
  handle: ".tile__title", // Restricts sort start click/touch to the specified element
  draggable: ".tile", // Specifies which items inside the element should be sortable
  onUpdate: function (evt/**Event*/){
     var item = evt.item; // the current dragged HTMLElement
  }
});
// ..
sort.destroy();
// Editable list
var editableList = new Sortable(editable, {
  filter: '.js-remove',
  onFilter: function (evt) {
    var el = editableList.closest(evt.item); // get dragged item
    el && el.parentNode.removeChild(el);
  }
});
</code></pre>
		</div>
	</div>
	<script type="text/javascript">
		(function (){
			var console = window.console;
			if( !console.log ){
				console.log = function (){
					alert([].join.apply(arguments, ' '));
				};
			}
			Sortable.create(foo, {
				group: "words",
				animation: 150,
				store: {
					get: function (sortable) {
						var order = localStorage.getItem(sortable.options.group);
						return order ? order.split('|') : [];
					},
					set: function (sortable) {
						var order = sortable.toArray();
						localStorage.setItem(sortable.options.group, order.join('|'));
					}
				},
				onAdd: function (evt){ console.log('onAdd.foo:', [evt.item, evt.from]); },
				onUpdate: function (evt){ console.log('onUpdate.foo:', [evt.item, evt.from]); },
				onRemove: function (evt){ console.log('onRemove.foo:', [evt.item, evt.from]); },
				onStart:function(evt){ console.log('onStart.foo:', [evt.item, evt.from]);},
				onSort:function(evt){ console.log('onStart.foo:', [evt.item, evt.from]);},
				onEnd: function(evt){ console.log('onEnd.foo:', [evt.item, evt.from]);}
			});
			Sortable.create(bar, {
				group: "words",
				animation: 150,
				onAdd: function (evt){ console.log('onAdd.bar:', evt.item); },
				onUpdate: function (evt){ console.log('onUpdate.bar:', evt.item); },
				onRemove: function (evt){ console.log('onRemove.bar:', evt.item); },
				onStart:function(evt){ console.log('onStart.foo:', evt.item);},
				onEnd: function(evt){ console.log('onEnd.foo:', evt.item);}
			});
			Sortable.create(multi, {
				animation: 150,
				draggable: '.tile',
				handle: '.tile__name'
			});
			var editableList = Sortable.create(editable, {
				animation: 150,
				filter: '.js-remove',
				onFilter: function (evt) {
					evt.item.parentNode.removeChild(evt.item);
				}
			});
			addUser.onclick = function () {
				Ply.dialog('prompt', {
					title: 'Add',
					form: { name: 'name' }
				}).done(function (ui) {
					var el = document.createElement('li');
					el.innerHTML = ui.data.name + '<i class="js-remove">?</i>';
					editableList.el.appendChild(el);
				});
			};
			[].forEach.call(multi.getElementsByClassName('tile__list'), function (el){
				Sortable.create(el, {
					group: 'photo',
					animation: 150
				});
			});
			[{
				name: 'advanced',
				pull: true,
				put: true
			},
			{
				name: 'advanced',
				pull: 'clone',
				put: false
			}, {
				name: 'advanced',
				pull: false,
				put: true
			}].forEach(function (groupOpts, i) {
				Sortable.create(document.getElementById('advanced-' + (i + 1)), {
					sort: (i != 1),
					group: groupOpts,
					animation: 150
				});
			});
			Sortable.create(document.getElementById('handle-1'), {
				handle: '.drag-handle',
				animation: 150
			});
		})();
	</script>
	<style>
		/* Tomorrow Theme */
		/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
		/* Original theme - https://github.com/chriskempson/tomorrow-theme */
		/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
		.tomorrow-comment, pre .comment, pre .title {
		  color: #8e908c;
		}
		.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
		  color: #c82829;
		}
		.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
		  color: #f5871f;
		}
		.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
		  color: #eab700;
		}
		.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
		  color: #718c00;
		}
		.tomorrow-aqua, pre .css .hexcolor {
		  color: #3e999f;
		}
		.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
		  color: #4271ae;
		}
		.tomorrow-purple, pre .keyword, pre .javascript .function {
		  color: #8959a8;
		}
		pre {
			border: 0;
			background-color: #fff;
		}
		pre code {
		  display: block;
		  color: #4d4d4c;
		  font-size: 15px;
		  font-family: Menlo, Monaco, Consolas, monospace;
		  line-height: 1.5;
		  padding: 30px;
		}
	</style>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 拖動排序 拖拽排序
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 股票涨跌专业一天赚3000 赚钱宝已绑定手机 骑摩拜能赚钱吗 河南快三几点上班 全天北京赛车pk10计划 合买与保底 7-club娱乐平台 腾讯分分彩官网开奖号码记录 实体店彩票复式可不可以全包 快乐10分任三 江苏11选5任三 极速快3技巧赚钱方法 英雄杀刷分器 长沙麻将规则 秒速飞艇走势规律 七牛娱乐网址