mirror of https://github.com/RubaXa/Sortable.git
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.
520 lines
16 KiB
520 lines
16 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"/> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> |
|
<meta property="og:image" content="/st/og-image.png"/> |
|
|
|
<title>Sortable. No jQuery.</title> |
|
|
|
<meta name="keywords" content="sortable, reorder, list, javascript, html5, drag and drop, dnd, animation, groups, angular, ng-sortable, effects, rubaxa"/> |
|
<meta name="description" content="Sortable - is a minimalist JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor and AngularJS and any CSS library, e.g. Bootstrap."/> |
|
<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="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> |
|
|
|
|
|
<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="ag"></a> |
|
<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> |
|
|
|
|
|
<a name="h"></a> |
|
<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%; float: left; margin-top: 15px; margin-left: 10px" class="block__list_words"> |
|
<div class="block__list-title">Drag handles</div> |
|
<ul id="handle-1"> |
|
<li><span class="drag-handle">≡</span>Select text freely</li> |
|
<li><span class="drag-handle">≡</span>Drag my handle</li> |
|
<li><span class="drag-handle">≡</span>Best of both worlds</li> |
|
</ul> |
|
</div> |
|
|
|
<div style="clear: both"></div> |
|
</div> |
|
</div> |
|
|
|
|
|
<a name="ng"></a> |
|
<div id="todos" ng-app="todoApp" class="container" style="margin-top: 100px"> |
|
<div style="margin-left: 30px"> |
|
<div><div data-force="5" class="layer title title_xl">AngluarJS / ng-sortable</div></div> |
|
|
|
<div style="width: 30%; margin-top: -8px; margin-left: 10px; float: left;" class="block__list block__list_words"> |
|
<div ng-controller="TodoController"> |
|
<span style="padding-left: 20px">{{remaining()}} of {{todos.length}} remaining</span> |
|
[ <a href="" ng-click="archive()">archive</a> ] |
|
<ul ng-sortable="{ group: 'todo', animation: 150 }" class="unstyled"> |
|
<li ng-repeat="todo in todos"> |
|
<input type="checkbox" ng-model="todo.done"> |
|
<span class="done-{{todo.done}}">{{todo.text}}</span> |
|
</li> |
|
</ul> |
|
<form ng-submit="addTodo()" style="padding-left: 20px"> |
|
<input type="text" ng-model="todoText" size="30" |
|
placeholder="add new todo here"> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
|
|
<div style="width: 30%; margin-top: -8px; margin-left: 10px; float: left;" class="block__list block__list_words"> |
|
<div ng-controller="TodoControllerNext"> |
|
<span style="padding-left: 20px">{{remaining()}} of {{todos.length}} remaining</span> |
|
<ul ng-sortable="sortableConfig" class="unstyled"> |
|
<li ng-repeat="todo in todos"> |
|
<input type="checkbox" ng-model="todo.done"> |
|
<span class="done-{{todo.done}}">{{todo.text}}</span> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<div style="clear: both"></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 src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> |
|
<script src="ng-sortable.js"></script> |
|
|
|
<script> |
|
(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 |
|
}); |
|
|
|
|
|
angular.module('todoApp', ['ng-sortable']) |
|
.controller('TodoController', ['$scope', function ($scope) { |
|
$scope.todos = [ |
|
{text: 'learn angular', done: true}, |
|
{text: 'build an angular app', done: false} |
|
]; |
|
|
|
$scope.addTodo = function () { |
|
$scope.todos.push({text: $scope.todoText, done: false}); |
|
$scope.todoText = ''; |
|
}; |
|
|
|
$scope.remaining = function () { |
|
var count = 0; |
|
angular.forEach($scope.todos, function (todo) { |
|
count += todo.done ? 0 : 1; |
|
}); |
|
return count; |
|
}; |
|
|
|
$scope.archive = function () { |
|
var oldTodos = $scope.todos; |
|
$scope.todos = []; |
|
angular.forEach(oldTodos, function (todo) { |
|
if (!todo.done) $scope.todos.push(todo); |
|
}); |
|
}; |
|
}]) |
|
.controller('TodoControllerNext', ['$scope', function ($scope) { |
|
$scope.todos = [ |
|
{text: 'learn Sortable', done: true}, |
|
{text: 'use ng-sortable', done: false}, |
|
{text: 'Enjoy', done: false} |
|
]; |
|
|
|
$scope.remaining = function () { |
|
var count = 0; |
|
angular.forEach($scope.todos, function (todo) { |
|
count += todo.done ? 0 : 1; |
|
}); |
|
return count; |
|
}; |
|
|
|
$scope.sortableConfig = { group: 'todo', animation: 150 }; |
|
'Start End Add Update Remove Sort'.split(' ').forEach(function (name) { |
|
$scope.sortableConfig['on' + name] = console.log.bind(console, name); |
|
}); |
|
}]); |
|
})(); |
|
|
|
|
|
|
|
// 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>
|
|
|