HTML5学习(1) 模块拖动

来源：互联网发布：小米4支持什么网络制式编辑：程序博客网时间：2024/06/06 00:00

<!DOCTYPE HTML> //HTML5声明
<head>
<style type="text/css">
.parent{ //父容器CSS
float:left;
width:200px;
height:200px;
background-color:#fff;
border:3px solid rgb(0,255,0);
}
#test{ //拖动模块CSS
float:left;
width:100px;
height:100px;
background-color:#000;
border:2px solid rgb(255,0,0);
margin-top:45px;
margin-left:45px;
}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault(); //阻止浏览器默认操作.(浏览器默认不允许放入其他模块)
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);//发送消息.. 一般是唯一能标识拖动模块的信息
}

function drop(ev)
{
ev.preventDefault(); //阻止浏览器默认操作.允许放入模块
var data=ev.dataTransfer.getData("Text"); //获取拖动模块ID
ev.target.appendChild(document.getElementById(data));//向目标模块添加子元素
}
</script>
</head>
<body>
<div class="parent" id='div_1' ondragover="allowDrop(event)" ondrop="drop(event)"> //父容器
<div id="test" draggable="true" ondragstart="drag(event)"></div>//拖动模块
</div>
<div class="parent" id='div_2' ondragover="allowDrop(event)" ondrop="drop(event)"></div>//父容器

</body>

心得:

父容器必须包含2个事件: ondragover(拖动到目标上方) ondrop(释放目标)

拖动模块必须有 draggable='true'且通过ondragstart事件来传递ID或者其他唯一标识