对图片进行单向拖拽
<img draggable="true">
将元素设置为可以拖拽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 200px;
border: yellow solid 2px;
}
</style>
</head>
<body>
<p>请把下面的图片拖拽到框框里面</p>
<!--ondragover 事件规定被拖动的数据能够被放置到何处。-->
<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<!--ondragstart规定拖动什么内容-->
<img id="drag1" src="../img/011.png" draggable="true" ondragstart="drag(event)">
<script>
function drag(ev) {
//设置拖动的格式和数据。使用事件对象的ID来表示数据
//dataTransfer.setData() 方法设置被拖动数据的数据类型和值:
ev.dataTransfer.setData("Text",ev.target.id);//数据类型是 "text",而值是这个可拖动元素的 id ("drag1")。
}
// 当放开被拖数据时,会发生 drop 事件。
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
function allowDrop(ev) {
// 默认地,数据/元素无法被放置到其他元素中。为了实现拖放,我们必须阻止元素的这种默认的处理方式。
ev.preventDefault();
}
</script>
</body>
</html>
以上的代码就可以实现将一个照片拖拽到另外一个框框中。
对标题进行双向拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1,#box2{
width: 200px;
height: 200px;
border: blue solid 3px;
}
</style>
</head>
<body>
<div id="box1" ondrop="drop(event)" ondragover="allowDrop(event)">
<h1 draggable="true" id="con" ondragstart="drag(event)">我是标题</h1>
</div>
<div id="box2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
function allowDrop(ev) {
ev.preventDefault();
}
</script>
</body>
</html>