就是这样的效果：拖拽之前
之后：
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> html5 drag and drop</title>
<style>
*[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 1s;
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 }
</style>
</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>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script>
var origin, is_moving = false;
$(".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() {
console.log(this);
$(this).removeClass("move");
});
$(e.target).addClass("move").animate(origin_pos, "fast",
function() {
$(this).removeClass("move");
});
}).on("dragstart",
function(e) {
if (is_moving) {
return false;
}
is_moving = true;
e.originalEvent.dataTransfer.effectAllowed = 'move';
origin = this;
}).on("dragover",
function(e) {
if (e.preventDefault) e.preventDefault(); //
is_moving = false;
e.originalEvent.dataTransfer.dropEffect = 'move'; //
});
</script>
</body>
</html>
每日一句：I always knew looking back on the tears would make me laugh, but I never knew looking back on the laughs would make me cry.
翻译：我知道再回首时，那些眼泪想来可笑；却不知再回眸时，那些欢声笑语也能叫我潸然泪下。