HTML5 拖放及排序的简单实现
HTML5 拖放及排序的简单实现
之前写过个类似的例子,看这里.
但想再深入一步,希望能通过拖放,来交换二个元素的位置.最好有应用到手机平台上.
作了个简单的例子,在手机上测试的时候不成功..查了好多资料.暂时未能解决.
效果如下图:
相关代码如下:
HTML :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
title
> html5 drag and drop</
title
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
a
draggable
=
"true"
id
=
"a1"
style
=
'left:0px; '
>one</
a
>
<
a
draggable
=
"true"
id
=
"a2"
style
=
'left:160px; '
>two</
a
>
<
a
draggable
=
"true"
id
=
"a3"
style
=
'left:320px; '
>three</
a
>
<
a
draggable
=
"true"
id
=
"a4"
style
=
'left:480px; '
>four</
a
>
<
a
draggable
=
"true"
id
=
"a5"
style
=
'left:640px; '
>five</
a
>
</
div
>
</
body
>
</
html
>
|
JavaScript :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
var
origin;
$(
".container"
).find(
"a"
).on(
"drop"
,
function
(e) {
var
origin_pos = $(origin).position();
var
target_pos = $(e.target).position();
$(origin).addClass(
"move"
).animate(target_pos,
"fast"
,
function
() {
$(
this
).removeClass(
"move"
);
});
$(e.target).addClass(
"move"
).animate(origin_pos,
"fast"
,
function
() {
$(
this
).removeClass(
"move"
);
});
}).on(
"dragstart"
,
function
(e) {
// only dropEffect='copy' will be dropable
e.originalEvent.dataTransfer.effectAllowed =
'move'
;
origin =
this
;
}).on(
"dragover"
,
function
(e) {
if
(e.preventDefault) e.preventDefault();
// allows us to drop
e.originalEvent.dataTransfer.dropEffect =
'move'
;
// only dropEffect='copy' will be dropable
});
|
CSS :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
*[draggable=true] {
-moz-user-select:
none
;
-khtml-user-drag: element;
cursor
:
move
;
}
*:-khtml-drag {
background-color
: rgba(
238
,
238
,
238
,
0.5
);
}
a {
text-decoration
:
none
;
color
:
#000
;
width
:
120px
;
border
:
3px
dashed
#999
;
padding
:
10px
;
display
:inline-
block
;
transition:
all
2
s;
position
:
absolute
;
top
:
10px
;
}
.container {
position
:
relative
;
}
a.
move
{
-webkit-transform:scale
3
d(
1.1
,
1.1
,
1.1
);
}
a:hover:after {
content
:
' (drag me)'
;
color
:
green
}
|
Powered By RunJS