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 2s;
position:absolute ;
top:10px;
}.container { position:relative;
}a.move {
-webkit-transform:scale3d( 1.1, 1.1, 1.1 );
}a:hover:after { content: ' (drag me)';
color: green }
|
Powered By RunJS