Файл: js/sortable/index.html
Строк: 119
<?php
<!doctype html>
<head>
<meta charset="utf-8">
<title>HTML5 Sortable jQuery Plugin</title>
<style>
header, section {
display: block;
}
body {
font-family: 'Droid Serif';
}
h1, h2 {
text-align: center;
font-weight: normal;
}
#features {
margin: auto;
width: 460px;
font-size: 0.9em;
}
.connected, .sortable, .exclude, .handles {
margin: auto;
padding: 0;
width: 310px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sortable.grid {
overflow: hidden;
}
.connected li, .sortable li, .exclude li, .handles li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
font-family: "Tahoma";
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
}
.handles span {
cursor: move;
}
li.disabled {
opacity: 0.5;
}
.sortable.grid li {
line-height: 80px;
float: left;
width: 80px;
height: 80px;
text-align: center;
}
li.highlight {
background: #FEE25F;
}
#connected {
width: 440px;
overflow: hidden;
margin: auto;
}
.connected {
float: left;
width: 200px;
}
.connected.no2 {
float: right;
}
li.sortable-placeholder {
border: 1px dashed #CCC;
background: none;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>HTML5 Sortable jQuery Plugin</h1>
</header>
<section>
<h2>Features</h2>
<ul id="features">
<li>Less than 1KB (minified).
<li>Built using native HTML5 drag and drop API.</li>
<li>Supports both list and grid style layouts.</li>
<li>Similar API and behaviour to jquery-ui sortable plugin.</li>
<li>Works in IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+ and, Opera 12+.</li>
</ul>
</section>
<section>
<h2>Sortable List</h2>
<ul class="sortable list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</section>
<section>
<h2>Sortable Grid</h2>
<ul class="sortable grid">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</section>
<section>
<h2>Exclude Items</h2>
<ul class="exclude list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="disabled">Item 4</li>
<li class="disabled">Item 5</li>
<li class="disabled">Item 6</li>
</ul>
</section>
<section>
<h2>Sortable List With Handles</h2>
<ul class="handles list">
<li><span>::</span> Item 1</li>
<li><span>::</span> Item 2</li>
<li><span>::</span> Item 3</li>
<li><span>::</span> Item 4</li>
<li><span>::</span> Item 5</li>
<li><span>::</span> Item 6</li>
</ul>
</section>
<section id="connected">
<h2>Connected Sortable Lists</h2>
<ul class="connected list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<ul class="connected list no2">
<li class="highlight">Item 1</li>
<li class="highlight">Item 2</li>
<li class="highlight">Item 3</li>
<li class="highlight">Item 4</li>
<li class="highlight">Item 5</li>
<li class="highlight">Item 6</li>
</ul>
</section>
<a href="http://github.com/farhadi/html5sortable"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/edc6dae7a1079163caf7f17c60495bbb6d027c93/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub"></a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.sortable.js"></script>
<script>
$(function() {
$('.sortable').sortable();
$('.handles').sortable({
handle: 'span'
});
$('.connected').sortable({
connectWith: '.connected'
});
$('.exclude').sortable({
items: ':not(.disabled)'
});
});
</script>
</body>
</html>
?>