width: 220px;
text-align: center;
display: table;
}
#target > p
{
display: table-cell;
vertical-align: middle;
}
#target > img
{
margin: 1px;
}
img.dragged
{
background-color: Orange;
}
</style>
</head>
<body>
<div id=”src”>
<img draggable=”true” id=”car1″ src=”img/1.jpg” alt=”car1″ />
<img draggable=”true” id=”car2″ src=”img/2.jpg” alt=”car2″ />
<img draggable=”true” id=”car3″ src=”img/3.jpg” alt=”car3″ />
<div id=”target”>
<p id=”msg”>
drop here</p>
</div>
</div>
<script>
var src = document.getElementById(“src”);
var target = document.getElementById(“target”);
var msg = document.getElementById(“msg”);
src.ondragstart = function (e) {
e.target.classList.add(“dragged”);
}
src.ondragend = function (e) {
e.target.classList.remove(“dragged”);
msg.innerHTML = “drop here”;
}
src.ondrag = function (e) {
msg.innerHTML = e.target.id;
}
</script>
</body>
</html>
运行效果：
3.创建投放区
我们来看投放区相关的事件：dragenter：当拖拽对象进入投放区时触发；dragover：拖拽对象在投放区内移动时触发；dragleave：拖拽对象没有投放到投放区，离开投放区的时候触发；drop：拖拽对象投放在投放区时触发。
我们来看一个例子：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#src > *
{
float: left;
}
#target, #src > img
{
border: thin solid black;
padding: 2px;
margin: 4px;
}
#target
{
height: 123px;
width: 220px;
text-align: center;
display: table;
}
#target > p
{
display: table-cell;
vertical-align: middle;
}
#target > img
{
margin: 1px;
}
img.dragged
{
background-color: lightgrey;
}
</style>
</head>
<body>
<div id=”src”>
<img draggable=”true” id=”car1″ src=”img/1.jpg” alt=”car1″ />
<img draggable=”true” id=”car2″ src=”img/2.jpg” alt=”car2″ />
<img draggable=”true” id=”car3″ src=”img/3.jpg” alt=”car3″ />
