html5元素拖拽效果

来源：互联网发布：不持有的生活知乎编辑：程序博客网时间：2024/06/04 18:02

html5元素拖拽效果的实现需要借助js，分为4个步骤，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5元素拖拽效果</title>
<script type="text/javascript">
/**
存储拖放元素的ID值
*/
function setsData(ev){
ev.dataTransfer.setData('text',ev.target.id);
}
/**
允许改元素接受拖放元素进来
*/
function allowAll(ev){
ev.preventDefault();
}

/**
将拖拽元素填充到拖拽地点
*/
function paddData(ev){
ev.preventDefault();
$v=ev.dataTransfer.getData('text');
ev.target.appendChild(document.getElementById($v));
}
</script>
<style>
.d1,.d2,.d3,.d4,.d5{width:300px;height:200px;border:1px solid red;float:left;margin:30px;}
</style>
</head>

<body>

<img src="cs.png" id="tz" draggable="true" ondragstart="setsData(event)" />
<div class="d1" ondragover="allowAll(event)" ondrop="paddData(event)"></div>
<div class="d2" ondragover="allowAll(event)" ondrop="paddData(event)"></div>
<div class="d3" ondragover="allowAll(event)" ondrop="paddData(event)"></div>
<div class="d4" ondragover="allowAll(event)" ondrop="paddData(event)"></div>
<div class="d5" ondragover="allowAll(event)" ondrop="paddData(event)"></div>

</body>
</html>

0 0