Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
leizi929
Sortable
提交
d776a11d
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 搜索 >>
提交
d776a11d
编写于
2月 28, 2018
作者:
R
RubaXa
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
#1274: + swap option
上级
87941887
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
81 addition
and
23 deletion
+81
-23
README.md
README.md
+10
-0
Sortable.js
Sortable.js
+67
-23
st/app.css
st/app.css
+4
-0
未找到文件。
README.md
浏览文件 @
d776a11d
...
...
@@ -85,6 +85,7 @@ var sortable = new Sortable(el, {
touchStartThreshold
:
0, // px, how many pixels the point should move before cancelling a delayed drag event
disabled
:
false
, // Disables the sortable if set to
true
.
store
:
null
, // @see Store
swap
:
false
, // The dragged item to be swapped with the item you drop it on (instead of inserted next to it)
animation
:
150, // ms, animation speed moving items when sorting, `0` — without animation
handle
:
"
.my-handle"
,
// Drag handle selector within list items
filter
:
"
.ignore-elements"
,
// Selectors that do not lead to dragging (String or Function)
...
...
@@ -93,6 +94,7 @@ var sortable = new Sortable(el, {
ghostClass
:
"
sortable-ghost"
,
// Class name for the drop placeholder
chosenClass
:
"
sortable-chosen"
,
// Class name for the chosen item
dragClass
:
"
sortable-drag"
,
// Class name for the dragging item
swapClass
:
"
sortable-swap-highlight"
,
// Class name for the element under the dragged item.
dataIdAttr
:
'
data-id'
,
forceFallback
:
false
, // ignore the HTML5 DnD behaviour and force the fallback to kick in
...
...
@@ -404,6 +406,14 @@ The speed at which the window should scroll once the mouse pointer gets within t
---
#### `swap` option
Option to
true
will cause a dragged item to be swapped with the item you drop it on (instead of inserted next to it)
Demo
:
http://jsbin.com/covamiqufo/1/edit?html,js,output
---
### Event object ([demo](http://jsbin.com/xedusu/edit?js,output))
-
to:
`HTMLElement`
— list, in which moved element.
...
...
Sortable.js
浏览文件 @
d776a11d
...
...
@@ -139,7 +139,7 @@
if
(
scrollEl
)
{
el
=
scrollEl
;
rect
=
scrollEl
.
getBoundingClientRect
(
);
rect
=
_getBoundingClientRect
(
scrollEl
);
vx
=
(
abs
(
rect
.
right
-
x
)
<=
sens
)
-
(
abs
(
rect
.
left
-
x
)
<=
sens
);
vy
=
(
abs
(
rect
.
bottom
-
y
)
<=
sens
)
-
(
abs
(
rect
.
top
-
y
)
<=
sens
);
}
...
...
@@ -264,13 +264,15 @@
disabled
:
false
,
store
:
null
,
handle
:
null
,
scroll
:
true
,
scroll
:
true
,
scrollSensitivity
:
30
,
scrollSpeed
:
10
,
swap
:
false
,
draggable
:
/
[
uo
]
l/i
.
test
(
el
.
nodeName
)
?
'
li
'
:
'
>*
'
,
ghostClass
:
'
sortable-ghost
'
,
chosenClass
:
'
sortable-chosen
'
,
dragClass
:
'
sortable-drag
'
,
swapClass
:
'
sortable-swap-highlight
'
,
ignore
:
'
a, img
'
,
filter
:
null
,
preventOnFilter
:
true
,
...
...
@@ -633,7 +635,7 @@
_appendGhost
:
function
()
{
if
(
!
ghostEl
)
{
var
rect
=
dragEl
.
getBoundingClientRect
(
),
var
rect
=
_getBoundingClientRect
(
dragEl
),
css
=
_css
(
dragEl
),
options
=
this
.
options
,
ghostRect
;
...
...
@@ -653,10 +655,14 @@
_css
(
ghostEl
,
'
zIndex
'
,
'
100000
'
);
_css
(
ghostEl
,
'
pointerEvents
'
,
'
none
'
);
options
.
fallbackOnBody
&&
document
.
body
.
appendChild
(
ghostEl
)
||
rootEl
.
appendChild
(
ghostEl
);
if
(
options
.
fallbackOnBody
)
{
_insertBefore
(
document
.
body
,
ghostEl
,
null
);
}
else
{
_insertBefore
(
rootEl
,
ghostEl
,
null
);
}
// Fixing dimensions.
ghostRect
=
ghostEl
.
getBoundingClientRect
(
);
ghostRect
=
_getBoundingClientRect
(
ghostEl
);
_css
(
ghostEl
,
'
width
'
,
rect
.
width
*
2
-
ghostRect
.
width
);
_css
(
ghostEl
,
'
height
'
,
rect
.
height
*
2
-
ghostRect
.
height
);
}
...
...
@@ -680,7 +686,7 @@
// #1143: IFrame support workaround
_this
.
_cloneId
=
_nextTick
(
function
()
{
rootEl
.
insertBefore
(
cloneEl
,
dragEl
);
_insertBefore
(
rootEl
,
cloneEl
,
dragEl
);
_dispatchEvent
(
_this
,
rootEl
,
'
clone
'
,
dragEl
);
});
}
...
...
@@ -768,28 +774,36 @@
}
target
=
_closest
(
evt
.
target
,
options
.
draggable
,
el
);
dragRect
=
dragEl
.
getBoundingClientRect
(
);
dragRect
=
_getBoundingClientRect
(
dragEl
);
if
(
putSortable
!==
this
)
{
putSortable
=
this
;
isMovingBetweenSortable
=
true
;
}
if
(
options
.
swap
)
{
if
(
target
)
{
lastEl
&&
_toggleClass
(
lastEl
,
options
.
swapClass
,
false
);
_toggleClass
(
target
,
options
.
swapClass
,
true
);
lastEl
=
target
;
}
return
;
}
if
(
revert
)
{
_cloneHide
(
activeSortable
,
true
);
parentEl
=
rootEl
;
// actualization
if
(
cloneEl
||
nextEl
)
{
rootEl
.
insertBefore
(
dragEl
,
cloneEl
||
nextEl
);
_insertBefore
(
rootEl
,
dragEl
,
cloneEl
||
nextEl
);
}
else
if
(
!
canSort
)
{
rootEl
.
appendChild
(
dragE
l
);
_insertBefore
(
rootEl
,
dragEl
,
nul
l
);
}
return
;
}
if
((
el
.
children
.
length
===
0
)
||
(
el
.
children
[
0
]
===
ghostEl
)
||
(
el
===
evt
.
target
)
&&
(
_ghostIsLast
(
el
,
evt
))
)
{
...
...
@@ -803,14 +817,14 @@
return
;
}
targetRect
=
target
.
getBoundingClientRect
(
);
targetRect
=
_getBoundingClientRect
(
target
);
}
_cloneHide
(
activeSortable
,
isOwner
);
if
(
_onMove
(
rootEl
,
el
,
dragEl
,
dragRect
,
target
,
targetRect
,
evt
)
!==
false
)
{
if
(
!
dragEl
.
contains
(
el
))
{
el
.
appendChild
(
dragE
l
);
_insertBefore
(
el
,
dragEl
,
nul
l
);
parentEl
=
el
;
// actualization
}
...
...
@@ -825,7 +839,7 @@
lastParentCSS
=
_css
(
target
.
parentNode
);
}
targetRect
=
target
.
getBoundingClientRect
(
);
targetRect
=
_getBoundingClientRect
(
target
);
var
width
=
targetRect
.
right
-
targetRect
.
left
,
height
=
targetRect
.
bottom
-
targetRect
.
top
,
...
...
@@ -868,9 +882,9 @@
if
(
!
dragEl
.
contains
(
el
))
{
if
(
after
&&
!
nextSibling
)
{
el
.
appendChild
(
dragE
l
);
_insertBefore
(
el
,
dragEl
,
nul
l
);
}
else
{
target
.
parentNode
.
insertBefore
(
dragEl
,
after
?
nextSibling
:
target
);
_insertBefore
(
null
,
dragEl
,
after
?
nextSibling
:
target
);
}
}
...
...
@@ -887,10 +901,10 @@
var
ms
=
this
.
options
.
animation
;
if
(
ms
)
{
var
currentRect
=
target
.
getBoundingClientRect
(
);
var
currentRect
=
_getBoundingClientRect
(
target
);
if
(
prevRect
.
nodeType
===
1
)
{
prevRect
=
prevRect
.
getBoundingClientRect
(
);
prevRect
=
_getBoundingClientRect
(
prevRect
);
}
_css
(
target
,
'
transition
'
,
'
none
'
);
...
...
@@ -948,6 +962,22 @@
this
.
_offUpEvents
();
if
(
lastEl
&&
options
.
swap
)
{
_toggleClass
(
lastEl
,
options
.
swapClass
,
false
);
if
(
dragEl
!==
lastEl
)
{
var
anchor
=
dragEl
.
nextSibling
;
var
dragRect
=
_getBoundingClientRect
(
dragEl
);
var
lastRect
=
_getBoundingClientRect
(
lastEl
);
_insertBefore
(
null
,
dragEl
,
lastEl
)
_insertBefore
(
null
,
lastEl
,
anchor
);
this
.
_animate
(
dragRect
,
dragEl
);
this
.
_animate
(
lastRect
,
lastEl
);
}
}
if
(
evt
)
{
if
(
moved
)
{
evt
.
preventDefault
();
...
...
@@ -1120,7 +1150,7 @@
order
.
forEach
(
function
(
id
)
{
if
(
items
[
id
])
{
rootEl
.
removeChild
(
items
[
id
]);
rootEl
.
appendChild
(
items
[
id
]
);
_insertBefore
(
rootEl
,
items
[
id
],
null
);
}
});
},
...
...
@@ -1209,10 +1239,10 @@
if
(
!
state
)
{
if
(
cloneEl
.
state
)
{
if
(
sortable
.
options
.
group
.
revertClone
)
{
rootEl
.
insertBefore
(
cloneEl
,
nextEl
);
_insertBefore
(
rootEl
,
cloneEl
,
nextEl
);
sortable
.
_animate
(
dragEl
,
cloneEl
);
}
else
{
rootEl
.
insertBefore
(
cloneEl
,
dragEl
);
_insertBefore
(
rootEl
,
cloneEl
,
dragEl
);
}
}
}
...
...
@@ -1360,7 +1390,7 @@
evt
.
dragged
=
dragEl
;
evt
.
draggedRect
=
dragRect
;
evt
.
related
=
targetEl
||
toEl
;
evt
.
relatedRect
=
targetRect
||
toEl
.
getBoundingClientRect
(
);
evt
.
relatedRect
=
targetRect
||
_getBoundingClientRect
(
toEl
);
evt
.
willInsertAfter
=
willInsertAfter
;
evt
.
originalEvent
=
originalEvt
;
...
...
@@ -1388,7 +1418,7 @@
/** @returns {HTMLElement|false} */
function
_ghostIsLast
(
el
,
evt
)
{
var
lastEl
=
el
.
lastElementChild
,
rect
=
lastEl
.
getBoundingClientRect
(
);
rect
=
_getBoundingClientRect
(
lastEl
);
// 5 — min delta
// abs — нельзя добавлять, а то глюки при наведении сверху
...
...
@@ -1519,6 +1549,18 @@
return
clearTimeout
(
id
);
}
function
_getBoundingClientRect
(
el
)
{
return
el
.
getBoundingClientRect
();
}
function
_insertBefore
(
parent
,
el
,
ref
)
{
if
(
parent
===
null
)
{
parent
=
ref
.
parentNode
;
}
parent
.
insertBefore
(
el
,
ref
);
}
// Fixed #973:
_on
(
document
,
'
touchmove
'
,
function
(
evt
)
{
if
(
Sortable
.
active
)
{
...
...
@@ -1542,7 +1584,9 @@
clone
:
_clone
,
index
:
_index
,
nextTick
:
_nextTick
,
cancelNextTick
:
_cancelNextTick
cancelNextTick
:
_cancelNextTick
,
getBoundingClientRect
:
_getBoundingClientRect
,
insertBefore
:
_insertBefore
};
...
...
st/app.css
浏览文件 @
d776a11d
...
...
@@ -241,3 +241,7 @@ img {
#nested
ul
li
{
background-color
:
rgba
(
0
,
0
,
0
,
.05
);
}
.sortable-swap-highlight
{
background-color
:
#9AB6F1
;
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录