行内属性
ondragstart:该事件表示拖放开始
ondragover:该事件表示拖放结束
ondrag:该事件表示拖放过程
过程和结束
<div id="result" ondragover="allowDrag(event)" ondrop="drop(event) "></div>
开始
<!--draggable:值为true时表示元素可拖动,默认为false,表示不能拖动-->
<img id="result1" src="img/flower.jpg" alt="" draggable="true" ondragstart="drag(event)">
js内容
用于拖放的函数
function drag() {}
拖动已开始
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
拖动过程
//拖动过程
function drop(ev) {
//允许其他元素拖放到此处
ev.preventDefault();
//获取要拖放元素的id
var id = ev.dataTransfer.getData("Text");
//将一个标签添加到另外一个标签中,可以使用appendChild();
ev.target.appendChild(document.getElementById(id));
}
拖动结束
function allowDrag(ev) {
// 允许其他元素拖放到此处
ev.preventDefault();
}
整体效果
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#result {
width: 200px;
height: 260px;
border: 2px solid red;
}
</style>
</head>
<body>
<p>请将下面图片拖入到框中</p>
<!--ondragstart:该事件表示拖放开始
ondragover:该事件表示拖放结束
ondrag:该事件表示拖放过程-->
<div id="result" ondragover="allowDrag(event)" ondrop="drop(event) "></div>
<!--draggable:值为true时表示元素可拖动,默认为false,表示不能拖动-->
<img id="result1" src="img/flower.jpg" alt="" draggable="true" ondragstart="drag(event)">
<script>
//用于拖放的函数
//function drag() {}c
//拖动已开始
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
//拖动过程
function drop(ev) {
//允许其他元素拖放到此处
ev.preventDefault();
//获取要拖放元素的id
var id = ev.dataTransfer.getData("Text");
//将一个标签添加到另外一个标签中,可以使用appendChild();
ev.target.appendChild(document.getElementById(id));
}
//拖动结束
function allowDrag(ev) {
// 允许其他元素拖放到此处
ev.preventDefault();
}
</script>
</body>
</html>