说明都在Demo源码中标注了，直接贴源码！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 设置被拖动的数据的数据类型和值
function drag(ev){
console.log("event in drag ----->",ev);
ev.dataTransfer.setData('Text', ev.target.id)
}
// 允许放置元素，组织对元素的默认处理
function allowDrop(ev){
ev.preventDefault();
}
// 放置元素时触发
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData('Text');
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<!-- 2、放置一个放置拖动数据的盒子，添加ondragover属性规定被拖动数据允许放置的位置；
默认是无法将数据/元素放置在其他元素内的；
若设置允许放置，则需要阻止对元素的默认处理行为，即event.preventDefault();-->
<!-- 3、添加属性ondrop，当元素放置进来时，触发drop事件-->
<div class="father clearfix">
<div id="place1" ondragover="allowDrop(event)" ondrop="drop(event)" style="width: 200px; height: 100px;"></div>
<div id="place2" ondragover="allowDrop(event)" ondrop="drop(event)" style="width: 200px; height: 100px;"></div>
</div>
<!-- 1、设置元素可拖放，draggable设置为true，并添加ondragstart属性，触发drag(event)函数，函数内会规定被拖动的数据 -->
<img id="DragMember" src="Material/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)"
width="150" height="69">
</body>
</html>
<style type="text/css">
#place1,#place2{
width: 200px;
height: 100px;
border: 1px solid black;
margin-left: 20px;
float: left;
}
/* 清除浮动 */
.clearfix::after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom: 1;
}
</style>
网友评论