playground
/
Sortable
mirror of https://github.com/RubaXa/Sortable.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

* redesign

pull/10/head
RubaXa 11 years ago
parent
328baab4ed
commit
ad1ab7c726
4 changed files with 206 additions and 170 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      Sortable.js
  2. 2
      Sortable.min.js
  3. 372
      index.html
  4. BIN
      logo.png

2
Sortable.js
Unescape View File

@ -250,7 +250,7 @@
;
if( el.children.length === 0 || target == null ){
if( el.children.length === 0 ){
el.appendChild(dragEl);
}
else if( target && (target !== dragEl) ){

2
Sortable.min.js vendored
View File

File diff suppressed because one or more lines are too long

372
index.html
Unescape View File

@ -11,32 +11,48 @@
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:300);
html, body {
color: #333;
min-height: 100%;
font-size: 18px;
font-family: "Arial", Helvetica, Garuda, sans-serif;
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%);
}
body {
}
h1, h2, h3 {
body::before {
top: -8px;
left: -8px;
width: 100%;
bottom: 0;
opacity: .5;
content: '';
display: block;
position: absolute;
xbackground: url('mock.png');
}
html, body {
margin: 0;
padding: 0;
position: relative;
color: #464637;
min-height: 100%;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
h1 a {
color: #333;
text-decoration: underline;
}
h1 + div {
opacity: 0.95;
margin-bottom: 50px;
h1 {
color: #FF3F00;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
@ -47,190 +63,204 @@
}
.container {
width: 80%;
margin: auto;
min-width: 1100px;
max-width: 1300px;
position: relative;
}
.sortable-ghost {
opacity: .2;
}
img { vertical-align: middle; }
#contacts {
border-radius: 3px;
box-shadow: 0 0 1px rgba(0,0,0,0.4);
img {
border: 0;
vertical-align: middle;
}
#contacts li:first-child {
border-radius: 3px 3px 0 0;
}
#contacts li:last-child {
border-radius: 0 0 3px 3px;
}
#contacts li {
cursor: move;
padding: 10px;
background: rgba(255,255,255,.8);
border-bottom: 1px solid #ccc;
}
#contacts img {
margin-right: 5px;
}
.logo {
top: 55px;
left: 30px;
position: absolute;
}
#tags {
min-height: 100px;
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
border-radius: 5px;
background-color: #fff;
.title {
color: #fff;
padding: 3px 10px;
display: inline-block;
position: relative;
background-color: #FF7373;
}
#tags li {
cursor: move;
float: left;
margin: 10px;
padding: 6px 15px;
background: #B7D967;
border-radius: 3px;
box-shadow: 0 2px 0 #6d823d;
text-shadow: 0 1px 1px rgba(255,255,255,0.6);
.title_xl {
padding: 3px 15px;
font-size: 40px;
}
#tags img {
display: none;
}
.tile {
width: 280px;
float: left;
padding: 2px;
box-shadow: 0 0 0 3px rgba(0,0,0,0.2);
width: 22%;
min-width: 240px;
color: #FF7270;
padding: 10px 30px;
text-align: center;
margin-top: 15px;
margin-left: 5px;
background-color: #fff;
display: inline-block;
margin-right: 30px;
margin-bottom: 30px;
vertical-align: top;
}
.tile__title {
cursor: pointer;
padding: 7px 0 10px;
text-align: center;
background-color: #E0E4F2;
.tile__name {
padding-bottom: 10px;
border-bottom: 1px solid #FF7373;
}
.tile__list {
padding: 15px;
margin-top: 10px;
}
.tile__list img {
margin: 10px;
cursor: move;
margin: 10px;
border-radius: 100%;
}
.download {
color: #333;
margin-left: 10px;
text-decoration: none;
}
.download:hover {
text-decoration: none;
.block {
opacity: 1;
position: absolute;
}
.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;
}
</style>
</head>
<body>
<a href="https://github.com/RubaXa/Sortable"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<div class="container">
<h1>
<a href="https://github.com/RubaXa/Sortable/">Sortable</a>
<a class="download" title="Download" href="https://github.com/RubaXa/Sortable/archive/master.zip">&darr;</a>
</h1>
<div>&mdash; is a minimalist JavaScript library for modern browsers and touch devices (No jQuery).</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<h3>List A</h3>
<ul id="contacts">
<li>
<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/s32x32/41627_1611219478_5779_q.jpg"/>
<span>Catherine</span>
</li>
<li>
<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/s32x32/370175_619386670_43244658_q.jpg"/>
<span>Polina</span>
</li>
<li>
<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/s32x32/173108_654249662_698694459_q.jpg"/>
<span>Duke</span>
</li>
<li>
<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/s32x32/372024_100000330534964_827799899_q.jpg"/>
<span>Adnrey</span>
</li>
<li>
<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-ash1/s32x32/260934_100000460170867_1741520317_q.jpg"/>
<span>Maxim</span>
</li>
</ul>
</div>
<div class="col-md-6 col-sm-6">
<h3>List B</h3>
<ul id="tags">
<li>
<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/s32x32/274297_100002088418977_1552918698_q.jpg"/>
<span>Ilya</span>
</li>
<li>
<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-ash1/s32x32/370664_100003149104712_1050952731_q.jpg"/>
<span>Anna</span>
</li>
</ul>
</div>
<div class="container">
<div style="padding: 80px 0 0 195px; height: 160px;">
<a class="logo" href="https://github.com/RubaXa/Sortable"><img src="logo.png"/></a>
<h1>The JavaScript library for modern browsers and touch devices (No jQuery).</h1>
</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="container" id="multi">
<h2>Multi</h2>
<div class="container" style="height: 520px">
<div class="block" style="left: 14.5%; top: 0; width: 37%">
<div class="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 class="tile">
<div class="tile__title">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 class="block" style="left: 58%; top: 143px; width: 40%;">
<div class="title">List B</div>
<ul id="bar" class="block__list block__list_tags">
<li>казнить</li>
<li>,</li>
<li>нельзя</li>
<li>помиловать</li>
</ul>
</div>
</div>
<div class="tile">
<div class="tile__title">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 class="container">
<div id="multi" style="margin-left: 30px">
<div><div class="title title_xl">Multi</div></div>
<div class="tile">
<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>
<div class="tile">
<div class="tile__title">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 class="tile">
<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>
<div class="row"></div>
<p>&nbsp;</p>
<div class="tile" style="margin-right: 0">
<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>
<div class="container">
<h2>Code example</h2>
<pre class="javascript"><code>// Simple list
<div class="container" style="margin-top: 100px">
<div style="margin-left: 30px">
<div><div class="title title_xl">Code example</div></div>
<pre class="javascript" style="margin-top: 10px; margin-left: 10px; width: 90%"><code>// Simple list
var list = document.getElementById("my-ui-list");
new Sortable(list); // That's all.
@ -256,7 +286,7 @@ var sort = new Sortable(container, {
// ..
sort.destroy();
</code></pre>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
@ -276,18 +306,18 @@ sort.destroy();
}
new Sortable(contacts, {
group: "contacts",
onAdd: function (evt){ console.log('onAdd.contacts:', evt.detail); },
onUpdate: function (evt){ console.log('onUpdate.contacts:', evt.detail); },
onRemove: function (evt){ console.log('onRemove.contacts:', evt.detail); }
new Sortable(foo, {
group: "words",
onAdd: function (evt){ console.log('onAdd.foo:', evt.detail); },
onUpdate: function (evt){ console.log('onUpdate.foo:', evt.detail); },
onRemove: function (evt){ console.log('onRemove.foo:', evt.detail); }
});
new Sortable(tags, {
group: "contacts",
onAdd: function (evt){ console.log('onAdd.tags:', evt.detail); },
onUpdate: function (evt){ console.log('onUpdate.tags:', evt.detail); },
onRemove: function (evt){ console.log('onRemove.tags:', evt.detail); }
new Sortable(bar, {
group: "words",
onAdd: function (evt){ console.log('onAdd.bar:', evt.detail); },
onUpdate: function (evt){ console.log('onUpdate.bar:', evt.detail); },
onRemove: function (evt){ console.log('onRemove.bar:', evt.detail); }
});
@ -303,7 +333,9 @@ sort.destroy();
})();
function setNoiseBackground(el, color, width, height, opacity){
// Background
function setNoiseBackground(el, width, height, opacity){
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
@ -318,11 +350,15 @@ sort.destroy();
}
}
el.style.background = "url(" + canvas.toDataURL("image/png") + "), "+color;
el.style.background = "url(" + canvas.toDataURL("image/png") + ")";
}
// Usage
setNoiseBackground(document.getElementsByTagName('body')[0], "linear-gradient(to bottom, #E1E2D1 0%, #5AABA5 100%)", 50, 50, 0.03);
window.onload = function (){
// Usage
setNoiseBackground(document.getElementsByTagName('body')[0], 50, 50, 0.01);
};
</script>
@ -368,16 +404,16 @@ sort.destroy();
pre {
border: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
background-color: #fff;
}
pre code {
display: block;
color: #4d4d4c;
font-size: 15px;
font-family: Menlo, Monaco, Consolas, monospace;
line-height: 1.5;
padding: 10px;
padding: 30px;
}
</style>

BIN
logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

Write Preview
Loading…
Cancel
Save