Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
leizi929
Sortable
提交
1c7847b1
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 搜索 >>
提交
1c7847b1
编写于
9月 06, 2019
作者:
O
owen-m1
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
#1599: Support for transforms on ghost element
上级
4f17fb06
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
54 addition
and
15 deletion
+54
-15
README.md
README.md
+1
-0
src/Sortable.js
src/Sortable.js
+42
-8
src/utils.js
src/utils.js
+11
-7
未找到文件。
README.md
浏览文件 @
1c7847b1
...
...
@@ -16,6 +16,7 @@ Demo: http://sortablejs.github.io/Sortable/
*
Advanced swap detection
*
Smooth animations
*
[
Multi-drag
](
https://github.com/SortableJS/Sortable/tree/master/plugins/MultiDrag
)
support
*
Support for CSS transforms
*
Built using native HTML5 drag and drop API
*
Supports
*
[
Meteor
](
https://github.com/SortableJS/meteor-sortablejs
)
...
...
src/Sortable.js
浏览文件 @
1c7847b1
...
...
@@ -120,6 +120,10 @@ let dragEl,
tapEvt
,
touchEvt
,
lastDx
,
lastDy
,
tapDistanceLeft
,
tapDistanceTop
,
moved
,
...
...
@@ -548,6 +552,7 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
el
=
_this
.
el
,
options
=
_this
.
options
,
ownerDocument
=
el
.
ownerDocument
,
dragRect
=
getRect
(
target
),
dragStartFn
;
if
(
target
&&
!
dragEl
&&
(
target
.
parentNode
===
el
))
{
...
...
@@ -566,6 +571,9 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
clientY
:
(
touch
||
evt
).
clientY
};
tapDistanceLeft
=
tapEvt
.
clientX
-
dragRect
.
left
;
tapDistanceTop
=
tapEvt
.
clientY
-
dragRect
.
top
;
this
.
_lastX
=
(
touch
||
evt
).
clientX
;
this
.
_lastY
=
(
touch
||
evt
).
clientY
;
...
...
@@ -789,8 +797,7 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
+
(
relativeScrollOffset
?
(
relativeScrollOffset
[
0
]
-
ghostRelativeParentInitialScroll
[
0
])
:
0
)
/
(
scaleX
||
1
),
dy
=
((
touch
.
clientY
-
tapEvt
.
clientY
)
+
fallbackOffset
.
y
)
/
(
scaleY
||
1
)
+
(
relativeScrollOffset
?
(
relativeScrollOffset
[
1
]
-
ghostRelativeParentInitialScroll
[
1
])
:
0
)
/
(
scaleY
||
1
),
translate3d
=
evt
.
touches
?
'
translate3d(
'
+
dx
+
'
px,
'
+
dy
+
'
px,0)
'
:
'
translate(
'
+
dx
+
'
px,
'
+
dy
+
'
px)
'
;
+
(
relativeScrollOffset
?
(
relativeScrollOffset
[
1
]
-
ghostRelativeParentInitialScroll
[
1
])
:
0
)
/
(
scaleY
||
1
);
// only set the status to dragging, when we are actually dragging
if
(
!
Sortable
.
active
&&
!
awaitingDragStarted
)
{
...
...
@@ -802,12 +809,33 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
this
.
_onDragStart
(
evt
,
true
);
}
touchEvt
=
touch
;
if
(
ghostEl
)
{
if
(
ghostMatrix
)
{
ghostMatrix
.
e
+=
dx
-
(
lastDx
||
0
);
ghostMatrix
.
f
+=
dy
-
(
lastDy
||
0
);
}
else
{
ghostMatrix
=
{
a
:
1
,
b
:
0
,
c
:
0
,
d
:
1
,
e
:
dx
,
f
:
dy
};
}
let
cssMatrix
=
`matrix(
${
ghostMatrix
.
a
}
,
${
ghostMatrix
.
b
}
,
${
ghostMatrix
.
c
}
,
${
ghostMatrix
.
d
}
,
${
ghostMatrix
.
e
}
,
${
ghostMatrix
.
f
}
)`
;
css
(
ghostEl
,
'
webkitTransform
'
,
cssMatrix
);
css
(
ghostEl
,
'
mozTransform
'
,
cssMatrix
);
css
(
ghostEl
,
'
msTransform
'
,
cssMatrix
);
css
(
ghostEl
,
'
transform
'
,
cssMatrix
);
css
(
ghostEl
,
'
webkitTransform
'
,
translate3d
);
css
(
ghostEl
,
'
mozTransform
'
,
translate3d
);
css
(
ghostEl
,
'
msTransform
'
,
translate3d
);
css
(
ghostEl
,
'
transform
'
,
translate3d
);
lastDx
=
dx
;
lastDy
=
dy
;
touchEvt
=
touch
;
}
evt
.
cancelable
&&
evt
.
preventDefault
();
}
...
...
@@ -866,9 +894,13 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
css
(
ghostEl
,
'
zIndex
'
,
'
100000
'
);
css
(
ghostEl
,
'
pointerEvents
'
,
'
none
'
);
Sortable
.
ghost
=
ghostEl
;
container
.
appendChild
(
ghostEl
);
// Set transform-origin
css
(
ghostEl
,
'
transform-origin
'
,
(
tapDistanceLeft
/
parseInt
(
ghostEl
.
style
.
width
)
*
100
)
+
'
%
'
+
(
tapDistanceTop
/
parseInt
(
ghostEl
.
style
.
height
)
*
100
)
+
'
%
'
);
}
},
...
...
@@ -1476,7 +1508,9 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
el
.
checked
=
true
;
});
savedInputChecked
.
length
=
0
;
savedInputChecked
.
length
=
lastDx
=
lastDy
=
0
;
},
handleEvent
:
function
(
/**Event*/
evt
)
{
...
...
src/utils.js
浏览文件 @
1c7847b1
...
...
@@ -109,14 +109,18 @@ function css(el, prop, val) {
function
matrix
(
el
,
selfOnly
)
{
let
appliedTransforms
=
''
;
do
{
let
transform
=
css
(
el
,
'
transform
'
);
if
(
typeof
(
el
)
===
'
string
'
)
{
appliedTransforms
=
el
;
}
else
{
do
{
let
transform
=
css
(
el
,
'
transform
'
);
if
(
transform
&&
transform
!==
'
none
'
)
{
appliedTransforms
=
transform
+
'
'
+
appliedTransforms
;
}
/* jshint boss:true */
}
while
(
!
selfOnly
&&
(
el
=
el
.
parentNode
));
if
(
transform
&&
transform
!==
'
none
'
)
{
appliedTransforms
=
transform
+
'
'
+
appliedTransforms
;
}
/* jshint boss:true */
}
while
(
!
selfOnly
&&
(
el
=
el
.
parentNode
));
}
const
matrixFn
=
window
.
DOMMatrix
||
window
.
WebKitCSSMatrix
||
window
.
CSSMatrix
;
/*jshint -W056 */
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录