拖拽
1.draggable属性:设置可以拖拽的控件值包括
1.true:可以拖拽
2.false:不可以拖拽
3.auto:浏览器判断
2.拖放事件
ondragstart:开始拖动时触发(被拖动对象)
ondrag:每当拖动元素被拖动时就会触发(被拖动对象)
ondragend:拖动时,鼠标松开会触发(被拖动对象)
ondragenter:被拖动元素进入本元素的范围内时触发(目标对象)
ondragover:当拖动元素拖动到本元素的范围内拖动时触发(当前目标对象)
ondragleave:被拖动元素离开本元素时触发(先前目标对象)
ondrop:每当拖动元素被放开时就会触发(当前目标对象)
3.dataTransfer对象的方法
1.getData(type,data)方法:返回指定格式的数据
2.setData (type)方法:设置(声明)指定格式数据
3.ClearData(type)方法 :删除指定格式数据
拖拽案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片拖拽</title>
<style>
#d1{
width:300px;
height:300px;
padding:10px;
border:6px solid #fff;
position:absolute;
top: 30px;
left: 33px;
}
#d2{
width:300px;
height:300px;
padding:10px;
border:6px solid #fff;
position:absolute;
margin-top:380px;
margin-left:380px;
}
#d3{
width:300px;
height:300px;
padding:10px;
border:6px solid #fff;
position:absolute;
margin-left:380px;
top: 30px;
}
#d4{
width:300px;
height:300px;
padding:10px;
border:6px solid #fff;
position:absolute;
margin-top:380px;
left: 33px;
}
#d5{
border: 1px solid #fff;
background: #7671B9;
width: 740px;
height: 730px;
}
</style>
<script>
function tz(event){
event.preventDefault();
}
function drag(event){
event.dataTransfer.setData("Text",event.target.id);
}
function drop(event){
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="d5">
<div id="d1" ondrop="drop(event)" ondragover="tz(event)">
<img src="1.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="300px" height="300px;" />
</div>
<div id="d2" ondrop="drop(event)" ondragover="tz(event)"></div>
<div id="d3" ondrop="drop(event)" ondragover="tz(event)"></div>
<div id="d4" ondrop="drop(event)" ondragover="tz(event)"></div>
</div>
</body>
</html>