<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1、首先，为了使元素可拖动，把 draggable 属性设置为 true ： -->
<!-- 2、拖动什么 拖动什么 - ondragstart 和 setData() -->
<!-- 2.1、ondragstart事件 (用户开始拖动元素时触发) drag(event)，它规定了被拖动的数据。 -->
<img id="drag1" src="蜡笔小新.jpg" draggable="true" ondragstart="drag(event)" width="200" height="200" /><br>
<!-- 3、放到何处 - ondragover -->
<!-- 3.1、ondragover 事件规定在何处放置被拖动的数据 -->
<!-- 3.2、默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法： -->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="width: 200px; height: 200px; border: 1px solid red;"></div>
<!-- 4、进行放置 - ondrop -->
<!-- 4.1、当放置被拖数据时，会发生 drop 事件。ondrop 属性调用了一个函数，drop(event)： -->
<script>
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id); //dataTransfer.setData() 方法设置被拖数据的数据类型和值：
}
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
Draggable
猜你喜欢
转载自blog.csdn.net/weixin_44640323/article/details/108440907
今日推荐
周排行