<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" / >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" / >
< title > Sortable. No jQuery.< / title >
< meta name = "keywords" content = "sortable, reorder, list, javascript, html5, drag and drop, dnd, animation, effects, 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=0.5" / >
< link href = "//rubaxa.github.io/Ply/ply.css" rel = "stylesheet" type = "text/css" / >
< link href = "//fonts.googleapis.com/css?family=Roboto:300" rel = "stylesheet" type = "text/css" / >
< link href = "st/app.css" rel = "stylesheet" type = "text/css" / >
< / head >
< body >
< a href = "https://github.com/RubaXa/Sortable" > < img style = "position: fixed; 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 >
< div class = "container" >
< div style = "padding: 80px 150px 0; height: 160px;" >
< a class = "logo" href = "https://github.com/RubaXa/Sortable" > < img src = "st/logo.png" / > < / a >
< h1 data-force = "40" data-force-y = "2.5" > The JavaScript library for modern browsers and touch devices. No jQuery.< / h1 >
< / div >
< / div >
< 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 >
< a name = "m" > < / a >
< 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 = "//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 >
< / div >
< div class = "layer tile" data-force = "25" >
< 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 >
< / div >
< div class = "layer tile" data-force = "20" >
< div class = "tile__name" > Group C< / div >
< div class = "tile__list" >
< img src = "//fbcdn-profile-a.akamaihd.net/hprofile-ak-frc3/c12.12.156.156/s100x100/303317_320632284665935_15996162_a.jpg" / > <!--
-->< img src = "//fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/c9.9.109.109/s100x100/484507_4207733265938_1693034881_s.jpg" / >
< / div >
< / div >
< / div >
< / div >
< a name = "e" > < / a >
< 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 >
< a name = "c" > < / a >
< 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 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… < / div >
< script src = "//rubaxa.github.io/repos.js" > < / script >
< / div >
< / div >
< / div >
< script src = "Sortable.js" > < / script >
< script src = "//rubaxa.github.io/Ply/Ply.min.js" > < / script >
< script >
(function (){
var console = window.console;
if( !console.log ){
console.log = function (){
alert([].join.apply(arguments, ' '));
};
}
new Sortable(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); },
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);}
});
new Sortable(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);}
});
new Sortable(multi, {
animation: 150,
draggable: '.tile',
handle: '.tile__name'
});
var editableList = new Sortable(editable, {
animation: 150,
filter: '.js-remove',
onFilter: function (evt) {
var el = editableList.closest(evt.item);
el & & el.parentNode.removeChild(el);
}
});
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){
new Sortable(el, {
group: 'photo',
animation: 150
});
});
})();
// Background
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);
}
}
el.style.background = "url(" + canvas.toDataURL("image/png") + ")";
}
setNoiseBackground(document.getElementsByTagName('body')[0], 50, 50, 0.02);
}, false );
< / script >
<!-- 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;
font-size: 15px;
font-family: Menlo, Monaco, Consolas, monospace;
line-height: 1.5;
padding: 30px;
}
< / style >
< script src = "//yandex.st/highlightjs/7.5/highlight.min.js" > < / script >
< script > hljs . initHighlightingOnLoad ( ) ; < / script >
< 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 >
< / body >
< / html >
