html5元素拖拽效果

最新推荐文章于 2024-08-08 23:38:27 发布

为天空着色

最新推荐文章于 2024-08-08 23:38:27 发布

阅读量947

点赞数

分类专栏： html5 文章标签： html5 拖拽 javascript

本文链接：https://blog.csdn.net/u010533511/article/details/48749859

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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" οndragstart="setsData(event)" />
<div class="d1" οndragοver="allowAll(event)" οndrοp="paddData(event)"></div>
<div class="d2" οndragοver="allowAll(event)" οndrοp="paddData(event)"></div>
<div class="d3" οndragοver="allowAll(event)" οndrοp="paddData(event)"></div>
<div class="d4" οndragοver="allowAll(event)" οndrοp="paddData(event)"></div>
<div class="d5" οndragοver="allowAll(event)" οndrοp="paddData(event)"></div>

</body>
</html>