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.

494 lines
14 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, animation, groups, angular, ng-sortable, effects, rubaxa"/>
<meta name="description" content="Sortable - is a minimalist JavaScript library for modern browsers and touch devices (No jQuery). Support AngularJS."/>
10 years ago
<meta name="viewport" content="width=device-width, initial-scale=0.5"/>
11 years ago
<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"/>
11 years ago
<link href="st/app.css" rel="stylesheet" type="text/css"/>
11 years ago
</head>
<body>
10 years ago
<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>
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
<a name="m"></a>
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">
10 years ago
<img src="st/face-01.jpg"/><!--
--><img src="st/face-02.jpg"/><!--
--><img src="st/face-03.jpg"/><!--
--><img src="st/face-04.jpg"/>
11 years ago
</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">
10 years ago
<img src="st/face-05.jpg"/><!--
--><img src="st/face-06.jpg"/><!--
--><img src="st/face-07.jpg"/>
11 years ago
</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">
10 years ago
<img src="st/face-08.jpg"/><!--
--><img src="st/face-09.jpg"/>
11 years ago
</div>
</div>
</div>
11 years ago
</div>
11 years ago
<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>Meet</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)</div>
<ul id="advanced-2">
<li>Sex</li>
<li>Drags</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="ng"></a>
<div id="todos" ng-app="todoApp" class="container" style="margin-top: 100px">
<div style="margin-left: 30px">
10 years ago
<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>
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, {
10 years ago
animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
11 years ago
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();
// 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);
}
});
11 years ago
</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 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>
11 years ago
<script>
(function (){
var console = window.console;
if( !console.log ){
console.log = function (){
alert([].join.apply(arguments, ' '));
};
}
new Sortable(foo, {
11 years ago
group: "words",
10 years ago
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);}
11 years ago
});
11 years ago
new Sortable(bar, {
group: "words",
10 years ago
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);}
11 years ago
});
new Sortable(multi, {
10 years ago
animation: 150,
11 years ago
draggable: '.tile',
11 years ago
handle: '.tile__name'
11 years ago
});
var editableList = new Sortable(editable, {
10 years ago
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);
});
};
11 years ago
[].forEach.call(multi.getElementsByClassName('tile__list'), function (el){
10 years ago
new Sortable(el, {
group: 'photo',
animation: 150
});
11 years ago
});
[{
name: 'advanced',
pull: true,
put: true
},
{
name: 'advanced',
pull: 'clone',
put: false
}, {
name: 'advanced',
pull: false,
put: true
}].forEach(function (opts, i) {
new Sortable(document.getElementById('advanced-' + (i + 1)), {
group: opts,
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);
});
}]);
11 years ago
})();
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>