You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

437 lines
12 KiB

11 years ago
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
11 years ago
<title>Sortable. No jQuery.</title>
11 years ago
<meta name="keywords" content="sortable, reorder, list, javascript, html5, drag and drop, dnd, rubaxa"/>
<meta name="description" content="Sortable - is a minimalist JavaScript library for modern browsers and touch devices (No jQuery)."/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href='//fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'/>
11 years ago
<style>
11 years ago
html {
background-image: -webkit-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
background-image: -ms-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
background-image: linear-gradient(to bottom, #F4E2C9 20%, #F4D7C9 100%);
}
html, body {
margin: 0;
padding: 0;
position: relative;
color: #464637;
min-height: 100%;
font-size: 20px;
11 years ago
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
11 years ago
h1 {
color: #FF3F00;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
11 years ago
text-align: center;
11 years ago
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
11 years ago
.container {
width: 80%;
margin: auto;
min-width: 1100px;
max-width: 1300px;
position: relative;
}
11 years ago
@media (min-width: 750px) and (max-width: 970px){
.container {
width: 100%;
min-width: 750px;
}
}
11 years ago
11 years ago
.sortable-ghost {
opacity: .2;
}
11 years ago
img {
border: 0;
vertical-align: middle;
11 years ago
}
11 years ago
.logo {
top: 55px;
left: 30px;
position: absolute;
}
11 years ago
11 years ago
.title {
color: #fff;
padding: 3px 10px;
display: inline-block;
position: relative;
background-color: #FF7373;
11 years ago
z-index: 1000;
11 years ago
}
11 years ago
.title_xl {
padding: 3px 15px;
font-size: 40px;
11 years ago
}
.tile {
11 years ago
width: 22%;
min-width: 240px;
color: #FF7270;
padding: 10px 30px;
text-align: center;
margin-top: 15px;
margin-left: 5px;
11 years ago
margin-right: 30px;
11 years ago
background-color: #fff;
11 years ago
display: inline-block;
vertical-align: top;
11 years ago
}
11 years ago
.tile__name {
11 years ago
cursor: move;
11 years ago
padding-bottom: 10px;
border-bottom: 1px solid #FF7373;
11 years ago
}
.tile__list {
11 years ago
margin-top: 10px;
11 years ago
}
11 years ago
.tile__list:last-child {
11 years ago
margin-right: 0;
min-height: 80px;
11 years ago
}
11 years ago
.tile__list img {
cursor: move;
11 years ago
margin: 10px;
border-radius: 100%;
11 years ago
}
11 years ago
.block {
opacity: 1;
position: absolute;
11 years ago
}
11 years ago
.block__list {
padding: 20px 0;
max-width: 360px;
margin-top: -8px;
margin-left: 5px;
background-color: #fff;
}
.block__list li { cursor: move; }
.block__list_words li {
background-color: #fff;
padding: 10px 40px;
}
.block__list_words .sortable-ghost {
opacity: 0.4;
background-color: #F4E2C9;
}
.block__list_words li:first-letter {
text-transform: uppercase;
}
.block__list_tags {
padding-left: 30px;
}
.block__list_tags:after {
clear: both;
content: '';
display: block;
}
.block__list_tags li {
color: #fff;
float: left;
margin: 8px 20px 10px 0;
padding: 5px 10px;
min-width: 10px;
background-color: #5F9EDF;
text-align: center;
}
.block__list_tags li:first-child:first-letter {
text-transform: uppercase;
}
11 years ago
</style>
</head>
<body>
11 years ago
<a href="https://github.com/RubaXa/Sortable"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 10000;" src="//s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
11 years ago
11 years ago
<div class="container">
11 years ago
<div style="padding: 80px 150px 0; height: 160px;">
11 years ago
<a class="logo" href="https://github.com/RubaXa/Sortable"><img src="st/logo.png"/></a>
11 years ago
<h1 data-force="40" data-force-y="2.5">The JavaScript library for modern browsers and touch devices. No&nbsp;jQuery.</h1>
11 years ago
</div>
</div>
11 years ago
<div class="container" style="height: 520px">
11 years ago
<div data-force="30" class="layer block" style="left: 14.5%; top: 0; width: 37%">
<div class="layer title">List A</div>
11 years ago
<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>
11 years ago
11 years ago
<div data-force="18" class="layer block" style="left: 58%; top: 143px; width: 40%;">
<div class="layer title">List B</div>
11 years ago
<ul id="bar" class="block__list block__list_tags">
<li>казнить</li>
<li>,</li>
<li>нельзя</li>
<li>помиловать</li>
</ul>
11 years ago
</div>
11 years ago
</div>
11 years ago
11 years ago
<div class="container">
<div id="multi" style="margin-left: 30px">
11 years ago
<div><div data-force="5" class="layer title title_xl">Multi</div></div>
11 years ago
11 years ago
<div class="layer tile" data-force="30">
11 years ago
<div class="tile__name">Group A</div>
<div class="tile__list">
<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/c9.9.113.113/s100x100/59436_1391411357920_1388516_s.jpg"/><!--
--><img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c13.8.104.104/s100x100/941190_10151608397684663_1532692251_s.jpg"/><!--
--><img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-frc3/c0.0.103.103/s100x100/382696_10150378364701671_1792621129_a.jpg"/><!--
--><img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c44.10.116.116/s100x100/552948_430685950285752_1435082176_a.jpg"/>
</div>
11 years ago
</div>
11 years ago
<div class="layer tile" data-force="25">
11 years ago
<div class="tile__name">Group B</div>
<div class="tile__list">
<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c8.8.105.105/s100x100/558916_4874661741992_448469446_s.jpg"/><!--
--><img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/c29.9.117.117/s100x100/68347_385372304875713_1358705380_a.jpg"/><!--
--><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/c9.9.113.113/s100x100/424349_465457316812937_2106915541_s.jpg"/>
</div>
11 years ago
</div>
11 years ago
<div class="layer tile" data-force="20">
11 years ago
<div class="tile__name">Group C</div>
<div class="tile__list">
o <img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-frc3/c12.12.156.156/s100x100/303317_320632284665935_15996162_a.jpg"/><!--
11 years ago
--><img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/c9.9.109.109/s100x100/484507_4207733265938_1693034881_s.jpg"/>
</div>
</div>
</div>
11 years ago
</div>
11 years ago
<div class="container" style="margin-top: 100px">
<div style="margin-left: 30px">
11 years ago
<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
11 years ago
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, {
handle: ".tile__title", // Restricts sort start click/touch to the specified element
draggable: ".tile", // Specifies which items inside the element should be sortable
11 years ago
onUpdate: function (evt/**Event*/){
11 years ago
var item = evt.item; // the current dragged HTMLElement
11 years ago
}
});
// ..
sort.destroy();
</code></pre>
11 years ago
</div>
11 years ago
<div class="container" style="margin: 100px 0;">
<div style="margin-left: 30px">
<div><div class="layer title title_xl">See also</div></div>
<div id="rubaxa-repos" data-force="100" class="layer" style="margin-top: -8px; margin-left: 10px; width: 90%; background-color: #fff;">Loading&hellip;</div>
<script src="//rubaxa.github.io/repos.js"></script>
11 years ago
</div>
</div>
11 years ago
</div>
11 years ago
11 years ago
<script src="Sortable.js"></script>
<script>
(function (){
var console = window.console;
if( !console.log ){
console.log = function (){
alert([].join.apply(arguments, ' '));
};
}
11 years ago
new Sortable(foo, {
group: "words",
onAdd: function (evt){ console.log('onAdd.foo:', evt.item); },
onUpdate: function (evt){ console.log('onUpdate.foo:', evt.item); },
onRemove: function (evt){ console.log('onRemove.foo:', evt.item); },
onStart:function(evt){ console.log('onStart.foo:',evt.item);},
onEnd: function(evt){ console.log('onEnd.foo:', evt.item);}
11 years ago
});
11 years ago
new Sortable(bar, {
group: "words",
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);}
11 years ago
});
new Sortable(multi, {
draggable: '.tile',
11 years ago
handle: '.tile__name'
11 years ago
});
[].forEach.call(multi.getElementsByClassName('tile__list'), function (el){
new Sortable(el, { group: 'photo' });
});
})();
11 years ago
// Background
11 years ago
document.addEventListener( "DOMContentLoaded", function (){
function setNoiseBackground(el, width, height, opacity){
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
for( var i = 0; i < width; i++ ){
for( var j = 0; j < height; j++ ){
var val = Math.floor(Math.random() * 255);
context.fillStyle = "rgba(" + val + "," + val + "," + val + "," + opacity + ")";
context.fillRect(i, j, 1, 1);
}
11 years ago
}
11 years ago
el.style.background = "url(" + canvas.toDataURL("image/png") + ")";
11 years ago
}
11 years ago
setNoiseBackground(document.getElementsByTagName('body')[0], 50, 50, 0.02);
}, false );
</script>
11 years ago
<!-- highlight.js -->
<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;
11 years ago
font-size: 15px;
11 years ago
font-family: Menlo, Monaco, Consolas, monospace;
line-height: 1.5;
11 years ago
padding: 30px;
11 years ago
}
</style>
<script src="//yandex.st/highlightjs/7.5/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
11 years ago
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-16483888-3', 'rubaxa.github.io');
ga('send', 'pageview');
</script>
11 years ago
</body>
</html>