html5元素拖拽效果

谁践踏了优雅 2022-08-08 19:52 261阅读 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>