HTML5的图像拖放
程序员文章站
2022-05-26 20:37:34
...
注意
对象元素的draggable属性设置为true，还需要注意的使a元素和img元素必须指定href。
编写和拖放有关的事件处理代码
设置拖放时的视觉效果
实例代码
<!DOCTYPE html>
<html lang="en">
<header >
<meta charset="UTF-8">
<title>拖放</title>
<script>
function allowDrop(ev)
{
ev.preventDefault();
ev.dataTransfer.dropEffect = 'link'
}
function drag(ev)
{
ev.effeAllowed = 'all';
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
#tuo{
background: #e54d26;
width: 540px;
height: 320px;
}
#cun{
width: 540px;
height: 320px;
border: 2px solid #D2D2D2;
box-shadow: 1px 4px 8px #646464;
}
</style>
</header>
<body>
<div id="cun" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<br/>
<img src="李庚希.jpg" id="tuo" draggable="true" οndragstart="drag(event)" width="500" / >
</body>
</html>