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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      Sortable.js
  2. 2
      Sortable.min.js
  3. 324
      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); el.appendChild(dragEl);
} }
else if( target && (target !== dragEl) ){ else if( target && (target !== dragEl) ){

2
Sortable.min.js vendored
View File

File diff suppressed because one or more lines are too long

324
index.html
Unescape View File

@ -11,32 +11,48 @@
<meta name="viewport" content="width=device-width, initial-scale=1"/> <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> <style>
@import url(http://fonts.googleapis.com/css?family=Roboto:300); @import url(http://fonts.googleapis.com/css?family=Roboto:300);
html, body { html {
color: #333; background-image: -webkit-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
min-height: 100%; background-image: -ms-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
font-size: 18px; background-image: linear-gradient(to bottom, #F4E2C9 20%, #F4D7C9 100%);
font-family: "Arial", Helvetica, Garuda, sans-serif; }
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-family: 'Roboto', sans-serif;
font-weight: 300; font-weight: 300;
} }
h1 a {
color: #333;
text-decoration: underline;
}
h1 + div { h1 {
opacity: 0.95; color: #FF3F00;
margin-bottom: 50px; font-size: 20px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
} }
@ -47,90 +63,122 @@
} }
.container {
width: 80%;
margin: auto;
min-width: 1100px;
max-width: 1300px;
position: relative;
}
.sortable-ghost { .sortable-ghost {
opacity: .2; opacity: .2;
} }
img { vertical-align: middle; } img {
border: 0;
#contacts { vertical-align: middle;
border-radius: 3px;
box-shadow: 0 0 1px rgba(0,0,0,0.4);
}
#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 { .logo {
margin-right: 5px; top: 55px;
left: 30px;
position: absolute;
} }
#tags { .title {
min-height: 100px; color: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,0.3); padding: 3px 10px;
border-radius: 5px; display: inline-block;
background-color: #fff; position: relative;
background-color: #FF7373;
} }
.title_xl {
#tags li { padding: 3px 15px;
cursor: move; font-size: 40px;
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);
} }
#tags img {
display: none;
}
.tile { .tile {
width: 280px; width: 22%;
float: left; min-width: 240px;
padding: 2px; color: #FF7270;
box-shadow: 0 0 0 3px rgba(0,0,0,0.2); padding: 10px 30px;
text-align: center;
margin-top: 15px;
margin-left: 5px;
background-color: #fff; background-color: #fff;
display: inline-block;
margin-right: 30px; margin-right: 30px;
margin-bottom: 30px; vertical-align: top;
} }
.tile__title { .tile__name {
cursor: pointer; padding-bottom: 10px;
padding: 7px 0 10px; border-bottom: 1px solid #FF7373;
text-align: center;
background-color: #E0E4F2;
} }
.tile__list { .tile__list {
padding: 15px; margin-top: 10px;
} }
.tile__list img { .tile__list img {
margin: 10px;
cursor: move; cursor: move;
margin: 10px;
border-radius: 100%;
} }
.download {
color: #333;
margin-left: 10px; .block {
text-decoration: none; opacity: 1;
position: absolute;
} }
.download:hover { .block__list {
text-decoration: none; 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> </style>
</head> </head>
@ -138,67 +186,48 @@
<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> <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"> <div class="container">
<h1> <div style="padding: 80px 0 0 195px; height: 160px;">
<a href="https://github.com/RubaXa/Sortable/">Sortable</a> <a class="logo" href="https://github.com/RubaXa/Sortable"><img src="logo.png"/></a>
<a class="download" title="Download" href="https://github.com/RubaXa/Sortable/archive/master.zip">&darr;</a> <h1>The JavaScript library for modern browsers and touch devices (No jQuery).</h1>
</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>
</div>
<div class="col-md-6 col-sm-6"> <div class="container" style="height: 520px">
<h3>List B</h3> <div class="block" style="left: 14.5%; top: 0; width: 37%">
<div class="title">List A</div>
<ul id="tags"> <ul id="foo" class="block__list block__list_words">
<li> <li>бегемот</li>
<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/s32x32/274297_100002088418977_1552918698_q.jpg"/> <li>корм</li>
<span>Ilya</span> <li>антон</li>
</li> <li>сало</li>
<li> <li>железосталь</li>
<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-ash1/s32x32/370664_100003149104712_1050952731_q.jpg"/> <li>валик</li>
<span>Anna</span> <li>кровать</li>
</li> <li>краб</li>
</ul> </ul>
</div> </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> </div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="container" id="multi"> <div class="container">
<h2>Multi</h2> <div id="multi" style="margin-left: 30px">
<div><div class="title title_xl">Multi</div></div>
<div class="tile"> <div class="tile">
<div class="tile__title">Group A</div> <div class="tile__name">Group A</div>
<div class="tile__list"> <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-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-ash3/c13.8.104.104/s100x100/941190_10151608397684663_1532692251_s.jpg"/><!--
@ -208,7 +237,7 @@
</div> </div>
<div class="tile"> <div class="tile">
<div class="tile__title">Group B</div> <div class="tile__name">Group B</div>
<div class="tile__list"> <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-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="//fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/c29.9.117.117/s100x100/68347_385372304875713_1358705380_a.jpg"/><!--
@ -216,21 +245,22 @@
</div> </div>
</div> </div>
<div class="tile"> <div class="tile" style="margin-right: 0">
<div class="tile__title">Group C</div> <div class="tile__name">Group C</div>
<div class="tile__list"> <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-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"/> --><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="row"></div> </div>
<p>&nbsp;</p>
</div> </div>
<div class="container">
<h2>Code example</h2> <div class="container" style="margin-top: 100px">
<pre class="javascript"><code>// Simple list <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"); var list = document.getElementById("my-ui-list");
new Sortable(list); // That's all. new Sortable(list); // That's all.
@ -256,7 +286,7 @@ var sort = new Sortable(container, {
// .. // ..
sort.destroy(); sort.destroy();
</code></pre> </code></pre>
</div>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>&nbsp;</p> <p>&nbsp;</p>
@ -276,18 +306,18 @@ sort.destroy();
} }
new Sortable(contacts, { new Sortable(foo, {
group: "contacts", group: "words",
onAdd: function (evt){ console.log('onAdd.contacts:', evt.detail); }, onAdd: function (evt){ console.log('onAdd.foo:', evt.detail); },
onUpdate: function (evt){ console.log('onUpdate.contacts:', evt.detail); }, onUpdate: function (evt){ console.log('onUpdate.foo:', evt.detail); },
onRemove: function (evt){ console.log('onRemove.contacts:', evt.detail); } onRemove: function (evt){ console.log('onRemove.foo:', evt.detail); }
}); });
new Sortable(tags, { new Sortable(bar, {
group: "contacts", group: "words",
onAdd: function (evt){ console.log('onAdd.tags:', evt.detail); }, onAdd: function (evt){ console.log('onAdd.bar:', evt.detail); },
onUpdate: function (evt){ console.log('onUpdate.tags:', evt.detail); }, onUpdate: function (evt){ console.log('onUpdate.bar:', evt.detail); },
onRemove: function (evt){ console.log('onRemove.tags:', 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 canvas = document.createElement("canvas");
var context = canvas.getContext("2d"); 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") + ")";
} }
window.onload = function (){
// Usage // Usage
setNoiseBackground(document.getElementsByTagName('body')[0], "linear-gradient(to bottom, #E1E2D1 0%, #5AABA5 100%)", 50, 50, 0.03); setNoiseBackground(document.getElementsByTagName('body')[0], 50, 50, 0.01);
};
</script> </script>
@ -368,16 +404,16 @@ sort.destroy();
pre { pre {
border: 0; border: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
background-color: #fff; background-color: #fff;
} }
pre code { pre code {
display: block; display: block;
color: #4d4d4c; color: #4d4d4c;
font-size: 15px;
font-family: Menlo, Monaco, Consolas, monospace; font-family: Menlo, Monaco, Consolas, monospace;
line-height: 1.5; line-height: 1.5;
padding: 10px; padding: 30px;
} }
</style> </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