Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
leizi929
Sortable
提交
f7900f74
S
Sortable
项目概览
leizi929
/
Sortable
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
S
Sortable
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
f7900f74
编写于
12月 20, 2013
作者:
R
RubaXa
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
+ effects
上级
c4d4c145
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
83 addition
and
35 deletion
+83
-35
.gitignore
.gitignore
+1
-0
index.html
index.html
+82
-35
st/logo.png
st/logo.png
+0
-0
未找到文件。
.gitignore
浏览文件 @
f7900f74
node_modules
mock.png
index.html
浏览文件 @
f7900f74
...
...
@@ -10,11 +10,9 @@
<meta
name=
"description"
content=
"Sortable - is a minimalist JavaScript library for modern browsers and touch devices (No jQuery)."
/>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
/>
<link
href=
'http://fonts.googleapis.com/css?family=Roboto:300'
rel=
'stylesheet'
type=
'text/css'
/>
<style>
@import
url(http://fonts.googleapis.com/css?family=Roboto:300)
;
html
{
background-image
:
-webkit-linear-gradient
(
bottom
,
#F4E2C9
20%
,
#F4D7C9
100%
);
background-image
:
-ms-linear-gradient
(
bottom
,
#F4E2C9
20%
,
#F4D7C9
100%
);
...
...
@@ -38,6 +36,7 @@
font-size
:
20px
;
font-family
:
'Roboto'
,
sans-serif
;
font-weight
:
300
;
text-align
:
center
;
}
...
...
@@ -47,7 +46,6 @@
list-style
:
none
;
}
.container
{
width
:
80%
;
margin
:
auto
;
...
...
@@ -88,6 +86,7 @@
display
:
inline-block
;
position
:
relative
;
background-color
:
#FF7373
;
z-index
:
1000
;
}
.title_xl
{
padding
:
3px
15px
;
...
...
@@ -184,16 +183,16 @@
<a
href=
"https://github.com/RubaXa/Sortable"
><img
style=
"position: absolute; top: 0; right: 0; border: 0;"
src=
"//s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"
alt=
"Fork me on GitHub"
></a>
<div
class=
"container"
>
<div
style=
"padding: 80px
0 0 195px
; height: 160px;"
>
<a
class=
"l
ogo"
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
style=
"padding: 80px
150px 0
; height: 160px;"
>
<a
class=
"l
ayer logo"
href=
"https://github.com/RubaXa/Sortable"
><img
src=
"st/
logo.png"
/></a>
<h1>
The JavaScript library for modern browsers and touch devices
. No
jQuery
.
</h1>
</div>
</div>
<div
class=
"container"
style=
"height: 520px"
>
<div
class=
"
block"
style=
"left: 14.5%; top: 0; width: 37%"
>
<div
class=
"title"
>
List A
</div>
<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>
...
...
@@ -206,8 +205,8 @@
</ul>
</div>
<div
class=
"
block"
style=
"left: 58%; top: 143px; width: 40%;"
>
<div
class=
"title"
>
List B
</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>
...
...
@@ -220,9 +219,9 @@
<div
class=
"container"
>
<div
id=
"multi"
style=
"margin-left: 30px"
>
<div><div
class=
"
title title_xl"
>
Multi
</div></div>
<div><div
data-force=
"5"
class=
"layer
title title_xl"
>
Multi
</div></div>
<div
class=
"
tile
"
>
<div
class=
"
layer tile"
data-force=
"30
"
>
<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"
/>
<!--
...
...
@@ -232,7 +231,7 @@
</div>
</div>
<div
class=
"
tile
"
>
<div
class=
"
layer tile"
data-force=
"25
"
>
<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"
/>
<!--
...
...
@@ -241,7 +240,7 @@
</div>
</div>
<div
class=
"
tile
"
>
<div
class=
"
layer tile"
data-force=
"20
"
>
<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"
/>
<!--
...
...
@@ -255,8 +254,8 @@
<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: 10
px; margin-left: 10px; width: 90%"
><code>
// Simple list
<div><div
class=
"
layer
title title_xl"
>
Code example
</div></div>
<pre
data-force=
"100"
class=
"layer javascript"
style=
"margin-top: -8
px; margin-left: 10px; width: 90%"
><code>
// Simple list
var list = document.getElementById("my-ui-list");
new Sortable(list); // That's all.
...
...
@@ -289,6 +288,7 @@ sort.destroy();
</div>
<script
src=
"Sortable.js"
></script>
<script>
...
...
@@ -331,35 +331,82 @@ sort.destroy();
// Background
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
);
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
"
)
+
"
)
"
;
}
el
.
style
.
background
=
"
url(
"
+
canvas
.
toDataURL
(
"
image/png
"
)
+
"
)
"
;
}
setNoiseBackground
(
document
.
getElementsByTagName
(
'
body
'
)[
0
],
50
,
50
,
0.02
);
},
false
);
</script>
<!-- Parallax -->
<script>
(
function
(){
var
x
,
y
;
var
items
=
[].
slice
.
call
(
document
.
querySelectorAll
(
'
.layer
'
)).
map
(
function
(
el
){
var
rect
=
el
.
getBoundingClientRect
();
el
.
x
=
rect
.
left
;
el
.
y
=
rect
.
top
;
el
.
w
=
rect
.
right
-
rect
.
left
;
el
.
h
=
rect
.
bottom
-
rect
.
top
;
el
.
force
=
el
.
getAttribute
(
'
data-force
'
)
||
10
;
return
el
;
});
document
.
addEventListener
(
'
dragover
'
,
function
(
evt
){
x
=
evt
.
clientX
;
y
=
evt
.
clientY
;
},
false
);
document
.
addEventListener
(
'
mousemove
'
,
function
(
evt
){
x
=
evt
.
clientX
;
y
=
evt
.
clientY
;
},
false
);
window
.
onload
=
function
(){
// Usage
setNoiseBackground
(
document
.
getElementsByTagName
(
'
body
'
)[
0
],
50
,
50
,
0.01
);
};
(
function
_loop
(){
var
winWidth
=
window
.
innerWidth
;
var
winHeight
=
window
.
innerHeight
;
var
halfWidth
=
winWidth
/
2
;
var
halfHeight
=
winHeight
/
2
;
var
rx
=
x
-
winWidth
/
2
;
var
ry
=
winHeight
/
2
-
y
;
items
.
forEach
(
function
(
el
){
var
dx
=
el
.
w
/
el
.
force
*
(
rx
/
-
halfWidth
);
var
dy
=
el
.
h
/
el
.
force
*
(
ry
/
halfHeight
);
el
.
style
[
'
transform
'
]
=
'
translate3d(
'
+
dx
+
'
px,
'
+
dy
+
'
px,0)
'
;
});
requestAnimationFrame
(
_loop
);
})();
})();
</script>
<!-- highlight.js -->
<style>
/* Tomorrow Theme */
...
...
logo.png
→
st/
logo.png
浏览文件 @
f7900f74
文件已移动
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录