1.拖放實現邏輯
開始拖動 ===> 拖動中 ===> 拖動結束(放手)
ondragstart ===> ondragover ===> ondrop
ondragstart 綁定在需要被拖動的dom上
ondragover和ondrop綁定在接受被拖動dom進入的dom上
2.實例
單個dom的拖動
<!DOCTYPE html>
<html>
<head>
<title>drag</title>
<style type="text/css">
.wrapper{
width: 400px;
height: 200px;
padding: 10px;
border: 1px solid red;
}
.wrapper img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="wrapper" ondragover="dragOver(event)" ondrop="dragDrop(event)">
<img id="dragImg" src="./login.jpg" draggable="true" ondragstart="dragStart(event)">
</div>
<div class="wrapper" ondragover="dragOver(event)" ondrop="dragDrop(event)">
</div>
</body>
<script type="text/javascript">
function dragStart (event) {
event.dataTransfer.setData('Text', event.target.id);
}
function dragOver(event) {
event.preventDefault();
}
function dragDrop(event) {
event.preventDefault();
var data = event.dataTransfer.getData('Text');
event.target.appendChild(document.querySelector('#'+data));
}
</script>
</html>多個dom的拖動
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dragList</title>
<style type="text/css">
#left{
float: left;
border: 1px solid red;
}
#right{
float: right;
border: 1px solid blue;
}
#left,#right{
width: 300px;
min-height: 400px;
}
.images img{
max-width: 260px;
max-height: 300px;
}
</style>
</head>
<body>
<ul id="left">
<li id="img1" class="images" draggable="true"><img src="login.jpg"></li>
<li id="img2" class="images" draggable="true"><img src="loginu.png"></li>
<li id="img3" class="images" draggable="true"><img src="反饋.png"></li>
</ul>
<ul id="right">
<li id="img4" class="images" draggable="true"><img src="日落.png"></li>
<li id="img5" class="images" draggable="true"><img src="等待.png"></li>
<li id="img6" class="images" draggable="true"><img src="規則.png"></li>
</ul>
</body>
<script type="text/javascript">
window.onload = function () {
function myPreventDefault(event) {
if(event.preventDefault) {
event.preventDefault();
}else {
event.returnValue = false;
}
}
function myDragOver (event) {
myPreventDefault(event);
}
function myDragDrop (event) {
myPreventDefault(event);
var data = event.dataTransfer.getData('Text');
console.log(data);
event.target.appendChild(document.getElementById(data));
}
function myDragStart(event) {
event.dataTransfer.setData('Text', event.target.id);
}
var nodeList = document.querySelectorAll('.images');
for (var i = 0; i < nodeList.length; i++) {
nodeList[i].addEventListener('dragstart',myDragStart);
}
document.getElementById('right').addEventListener('dragover', myDragOver);
document.getElementById('right').addEventListener('drop', myDragDrop);
document.getElementById('left').addEventListener('dragover', myDragOver);
document.getElementById('left').addEventListener('drop', myDragDrop);
}
</script>
</html>
