Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
leizi929
Sortable
提交
3955c3ba
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 搜索 >>
提交
3955c3ba
编写于
10月 13, 2015
作者:
L
Lebedev Konstantin
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #600 from gutenye/polymer
Add Polymer Support
上级
6140e497
82a0c763
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
158 addition
and
3 deletion
+158
-3
README.md
README.md
+13
-1
Sortable.html
Sortable.html
+139
-0
bower.json
bower.json
+6
-2
未找到文件。
README.md
浏览文件 @
3955c3ba
...
...
@@ -12,7 +12,7 @@ Demo: http://rubaxa.github.io/Sortable/
*
Supports drag handles
*and selectable text*
(better than voidberg's html5sortable)
*
Smart auto-scrolling
*
Built using native HTML5 drag and drop API
*
Supports
[
Meteor
](
meteor/README.md
)
,
[
AngularJS
](
#ng
)
and
[
React
](
#react
)
*
Supports
[
Meteor
](
meteor/README.md
)
,
[
AngularJS
](
#ng
)
,
[
React
](
#react
)
and
[
Polymer
](
#polymer
)
*
Supports any CSS library, e.g.
[
Bootstrap
](
#bs
)
*
Simple API
*
[
CDN
](
#cdn
)
...
...
@@ -472,6 +472,18 @@ Other attributes are:
---
<a name="polymer"></a>
### Support Polymer
```
html
<link rel="import" href="bower_components/Sortable/Sortable-js.html">
<sortable-js handle=".handle">
<template is="dom-repeat" items={{names}}>
<div>{{item}}</div>
</template>
<sortable-js>
```
### Method
...
...
Sortable.html
0 → 100644
浏览文件 @
3955c3ba
<link
rel=
"import"
href=
"../polymer/polymer.html"
>
<script
src=
"./Sortable.js"
></script>
<dom-module
id=
"sortable-js"
>
<template>
<content></content>
</template>
</dom-module>
<script>
Polymer
({
is
:
"
sortable-js
"
,
properties
:
{
group
:
{
type
:
String
,
value
:
()
=>
Math
.
random
(),
observer
:
"
groupChanged
"
},
sort
:
{
type
:
Boolean
,
value
:
true
,
observer
:
"
sortChanged
"
},
disabled
:
{
type
:
Boolean
,
value
:
false
,
observer
:
"
disabledChanged
"
},
store
:
{
type
:
Object
,
value
:
null
,
observer
:
"
storeChanged
"
},
handle
:
{
type
:
String
,
value
:
null
,
observer
:
"
handleChanged
"
},
scrollSensitivity
:
{
type
:
Number
,
value
:
30
,
observer
:
"
scrollSensitivityChanged
"
},
scrollSpeed
:
{
type
:
Number
,
value
:
10
,
observer
:
"
scrollSpeedChanged
"
},
ghostClass
:
{
type
:
String
,
value
:
"
sortable-ghost
"
,
observer
:
"
ghostClassChanged
"
},
chosenClass
:
{
type
:
String
,
value
:
"
sortable-chosen
"
,
observer
:
"
chosenClassChanged
"
},
ignore
:
{
type
:
String
,
value
:
"
a, img
"
,
observer
:
"
ignoreChanged
"
},
filter
:
{
type
:
Object
,
value
:
null
,
observer
:
"
filterChanged
"
},
animation
:
{
type
:
Number
,
value
:
0
,
observer
:
"
animationChanged
"
},
dropBubble
:
{
type
:
Boolean
,
value
:
false
,
observer
:
"
dropBubbleChanged
"
},
dragoverBubble
:
{
type
:
Boolean
,
value
:
false
,
observer
:
"
dragoverBubbleChanged
"
},
dataIdAttr
:
{
type
:
String
,
value
:
"
data-id
"
,
observer
:
"
dataIdAttrChanged
"
},
delay
:
{
type
:
Number
,
value
:
0
,
observer
:
"
delayChanged
"
},
forceFallback
:
{
type
:
Boolean
,
value
:
false
,
observer
:
"
forceFallbackChanged
"
},
fallbackClass
:
{
type
:
String
,
value
:
"
sortable-fallback
"
,
observer
:
"
fallbackClassChanged
"
},
fallbackOnBody
:
{
type
:
Boolean
,
value
:
false
,
observer
:
"
fallbackOnBodyChanged
"
},
draggable
:
{},
scroll
:
{}
},
created
()
{
// override default DOM property behavior
Object
.
defineProperties
(
this
,
{
draggable
:
{
get
()
{
return
this
.
_draggable
||
this
.
getAttribute
(
"
draggable
"
)
||
"
>*
"
},
set
(
value
)
{
this
.
_draggable
=
value
;
this
.
draggableChanged
(
value
)}
},
scroll
:
{
get
()
{
return
this
.
_scroll
||
JSON
.
parse
(
this
.
getAttribute
(
"
scroll
"
)
||
"
true
"
)
},
set
(
value
)
{
this
.
_scroll
=
value
;
this
.
scrollChanged
(
value
)}
}
})
},
attached
:
function
()
{
// Given
//
<
sortable
-
js
>
//
<
template
is
=
"
dom-repeat
"
items
=
{{
data
}}
>
//
<
div
>
//
<
template
is
=
"
dom-if
"
if
=
"
true
"
>
//
<
span
>
hello
<
/span></
template
><
/div
>
// After render, it becomes
//
<
sortable
-
js
>
//
<
div
>
//
<
span
>
hello
<
/span
>
//
<
template
is
=
"
dom-if
"
>
//
<
tempalte
is
=
"
dom-repeat
"
>
var
templates
=
this
.
querySelectorAll
(
"
template[is='dom-repeat']
"
)
var
template
=
templates
[
templates
.
length
-
1
]
var
options
=
{}
Object
.
keys
(
this
.
properties
).
forEach
(
key
=>
{
options
[
key
]
=
this
[
key
]
})
this
.
sortable
=
Sortable
.
create
(
this
,
Object
.
assign
(
options
,
{
onUpdate
:
e
=>
{
if
(
template
)
{
template
.
splice
(
"
items
"
,
e
.
newIndex
,
0
,
template
.
splice
(
"
items
"
,
e
.
oldIndex
,
1
)[
0
])
}
this
.
fire
(
"
update
"
,
e
)
},
onAdd
:
e
=>
{
if
(
template
)
{
var
froms
=
e
.
from
.
querySelectorAll
(
"
template[is='dom-repeat']
"
)
var
from
=
froms
[
froms
.
length
-
1
]
var
item
=
from
.
items
[
e
.
oldIndex
]
template
.
splice
(
"
items
"
,
e
.
newIndex
,
0
,
item
)
}
this
.
fire
(
"
add
"
,
e
)
},
onRemove
:
e
=>
{
if
(
template
)
{
template
.
splice
(
"
items
"
,
e
.
oldIndex
,
1
)[
0
]
}
this
.
fire
(
"
remove
"
,
e
)
},
onStart
:
e
=>
{
this
.
fire
(
"
start
"
,
e
)
},
onEnd
:
e
=>
{
this
.
fire
(
"
end
"
,
e
)
},
onSort
:
e
=>
{
this
.
fire
(
"
sort
"
,
e
)
},
onFilter
:
e
=>
{
this
.
fire
(
"
filter
"
,
e
)
},
onMove
:
e
=>
{
this
.
fire
(
"
move
"
,
e
)
}
}))
},
detached
:
function
()
{
this
.
sortable
.
destroy
()
},
groupChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
group
"
,
value
)
},
sortChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
sort
"
,
value
)
},
disabledChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
disabled
"
,
value
)
},
storeChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
store
"
,
value
)
},
handleChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
handle
"
,
value
)
},
scrollChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
scroll
"
,
value
)
},
scrollSensitivityChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
scrollSensitivity
"
,
value
)
},
scrollSpeedChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
scrollSpeed
"
,
value
)
},
draggableChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
draggable
"
,
value
)
},
ghostClassChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
ghostClass
"
,
value
)
},
chosenClassChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
chosenClass
"
,
value
)
},
ignoreChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
ignore
"
,
value
)
},
filterChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
filter
"
,
value
)
},
animationChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
animation
"
,
value
)
},
dropBubbleChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
dropBubble
"
,
value
)
},
dragoverBubbleChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
dragoverBubble
"
,
value
)
},
dataIdAttrChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
dataIdAttr
"
,
value
)
},
delayChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
delay
"
,
value
)
},
forceFallbackChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
forceFallback
"
,
value
)
},
fallbackClassChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
fallbackClass
"
,
value
)
},
fallbackOnBodyChanged
:
function
(
value
)
{
this
.
sortable
&&
this
.
sortable
.
option
(
"
fallbackOnBody
"
,
value
)
}
})
</script>
bower.json
浏览文件 @
3955c3ba
...
...
@@ -19,7 +19,8 @@
"drag"
,
"and"
,
"drop"
,
"dnd"
"dnd"
,
"web-components"
],
"license"
:
"MIT"
,
"ignore"
:
[
...
...
@@ -27,5 +28,8 @@
"bower_components"
,
"test"
,
"tests"
]
],
"dependencies"
:
{
"polymer"
:
"Polymer/polymer#~1.1.4"
,
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录