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.

345 lines
11 KiB

11 years ago
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
10 years ago
<meta property="og:image" content="/st/og-image.png"/>
11 years ago
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"/>
10 years ago
<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."/>
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>
<!-- Connected lists -->
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
<!-- Multi connected lists -->
<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
<!-- Editable list -->
<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>
<!-- Advanced connected lists -->
<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>
<!-- 'handle' option -->
<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%; margin-left: 10px" class="block__list_words">
<ul id="handle-1">
<li><span class="drag-handle">&#9776;</span>Select text freely</li>
<li><span class="drag-handle">&#9776;</span>Drag my handle</li>
<li><span class="drag-handle">&#9776;</span>Best of both worlds</li>
</ul>
</div>
<div style="clear: both"></div>
</div>
</div>
<!-- Angular -->
<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>
<!-- Code example -->
<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");
Sortable.create(list); // That's all.
11 years ago
// Grouping
var foo = document.getElementById("foo");
Sortable.create(foo, { group: "omega" });
11 years ago
var bar = document.getElementById("bar");
Sortable.create(bar, { group: "omega" });
11 years ago
// Or
var container = document.getElementById("multi");
var sort = Sortable.create(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 = Sortable.create(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 src="st/app.js"></script>
11 years ago
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>