<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box
{
padding: 0px;
margin: 0px;
width: 300px;
height: 100px;
border: 1px solid black;
}
</style>
<script>
function drag(ev)//开始拖拽的时候调用该函数,用户设置被拖数据的数据类型和值 该例子中数据类型是Text 值为被拖动元素的ID
{
ev.dataTransfer.setData("Text",ev.target.id);//ev.target是获取所操作的元素
}
function allowDrop(ev)
{
ev.preventDefault();//默认的无法将数据放入其他数据中,因此在这里要阻止默认,调用ondragover事件的event.preventDefault()
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="box" οndragοver="allowDrop(event)" οndrοp="drop(event)"></div><!--当放置被拖拽元素时会触发ondrop事件 ondragover事件规定在何处放被拖动元素-->
<img id="drag1" src="../img/a1.jpg" draggable="true" οndragstart="drag(event)" width="336px" height="69px"/> <!--要设置draggable的值为true,只有这样该元素才可被拖动 -->
</body>
</html>
<!--
1、将被拖拽元素的draggable属性设置成true,因为每个元素默认是不可拖拽的
2、声明drag(event)函数,并在被拖拽元素中添加 ondragstart事件,只要一拖拽就会触发该事件,
设置被拖拽元素的类型和值,值为被拖拽元素的id
3、声明allowDrop(event)函数,并在目标元素中添加ondragover事件, 是在拖拽过程中触发该事件并调用allowDrop(event)
函数,因为目标地址默认是不允许将数据放入的,因此这里要阻止默认
4、声明drop(event)函数,并在目标元素中添加drop(event)事件,在放入被拖拽元素的事件触发
-->
HTML5拖拽
最新推荐文章于 2023-08-18 22:20:23 发布