最近學了的一些關於拖拽的一些案例，原來的認識太過淺薄，所以以多個案例說明一下
目標導航
1，拖放事件
源對象
過程對象
目標對象
2，dataTransfer對象
setData（name，data） 存儲數據
getData（name） 獲取存儲名字為“name”的數據
clearData（name） 清除dataTransfer存儲的數據
setDragImage（element，x，y） 通過img元素設置拖放圖標
files屬性
3,元素拖拽 =》即從瀏覽器內拖動
3.1，將目標元素拖放至指定區域
3.2,設置拖動時的圖標
3.3，鼠標拖拽實現移動效果
1，拖放事件
如果不使用drag元素的話;也可以使用onmousedown，onmouseover，onmouseup這三個來實現效果；想要拖動的話，必須在其設置draggable屬性為true；需要注意的是，img和a默認為true
拖放過程中，被拖動的元素被稱為目標對象，在這過程中經歷的其他對象稱為過程對象，最終到達的對象接叫目標對象；而每個都有其屬性
源對象
ondragstart - 用戶開始拖動元素時觸發
ondrag - 元素正在拖動時觸發
ondragend - 用戶完成元素拖動后觸發
過程對象
ondragenter - 當被鼠標拖動的對象進入其容器范圍內時觸發此事件
ondragover - 當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件
ondragleave - 當被鼠標拖動的對象離開其容器范圍內時觸發此事件
目標對象
ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件
注意： 在拖動元素時，每隔 350 毫秒會觸發 ondrag 事件。
2，dataTransfer對象
setData（name，data） 存儲數據
第一個參數，要存儲數據的名字（可以自己命名）
第二個參數，要存儲的數據
getData（name） 獲取存儲名字為“name”的數據
clearData（name） 清除dataTransfer存儲的數據
參數可選，為空則清空所有數據
setDragImage（element，x，y） 通過img元素設置拖放圖標
element是拖拽時鼠標下面的圖片（img或canvas元素）
x、y分別相對於圖片的橫向和縱向偏移量，對應鼠標指針
files屬性
返回被拖拽的文件列表，是一個FileList對象，有length屬性，可通過下標訪問
3,元素拖拽 =》即從瀏覽器內拖動
3.1，最簡單的元素拖拽小案例；將目標元素拖放至指定區域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拖拽圖片至指定區域</title>
<style>
div {
width: 400px;
height: 500px;
border: 1px solid red;
}
</style>
<script>
window.onload = function() {
var img = document.getElementsByTagName("img")[0];
var div = document.getElementsByTagName("div")[0];
img.ondragstart = function(e) {
//設置一個數據；名字為“text”，值為img的id值
e.dataTransfer.setData("text", e.target.id);
console.log(e.target); //<img src="img/demo (4).png" draggable="true" alt="" id="img">；相當與this
console.log(this); //和上一句一樣,個人理解為.e是事件默認屬性,e.target就是事件的目標,即img
}
div.ondragover = function(e) {
e.preventDefault();//解禁當前元素為可放置被拖拽元素的區域,即允許在此放置物體
}
div.ondrop = function(e) {
e.preventDefault();
var id = e.dataTransfer.getData("text"); //獲取數據，獲得的其實是id值 即demo
var data = document.getElementById(id); //根據id選中元素
// e.target.appendChild(data);
this.appendChild(data);//和上一句一樣的含義，將id選擇中的元素data 轉移至div下
}
}
</script>
</head>
<body>
<img src="img/demo (4).png" draggable="true" alt="" id="demo">
<div>
<p>拖動圖片至此</p>
</div>
</body>
</html>
<!--
拖拽的前提，在源目標上設置可拖拽，draggable=“true”
注意：img和a默認為true
一個拖拽大概只需要三個事件就可以完成，分別是ondrogstart，ondrogover，ondrop
1，源對象 拖拽開始ondragstart
設置數據 e.dataTransfer.setData("text", e.target.id);
2.目標對象 去除ondrogover默認行為
e.preventDafault();
3,目標對象 拖拽完成drop
3.1，提取數據 var id = e.dataTransfer.getData("text");
3.2，根據id值得到節點 var data = document.getElementById(id);
3.3，開始操作
-->
基本上所有的元素拖拽都是這樣，效果不同是因為在3.3中的操作不同，這里是將一個圖片（元素）移動到一個盒子中（目標對象）
自然還有其他效果，例如：
1，垃圾箱回收效果，即拖拽到一定目標元素消失；
data.parentNode.removeChild(data); //刪除當前節點的辦法,找到父節點,然后刪除指定子節點
3.2,設置拖動時的圖標
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5拖放API之設置可拖放元素</title>
<style>
p {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<h3>HTML5拖放API之設置可拖放元素</h3>
<hr />
<p draggable="true" id="p" ondragstart="drag(event)">這是一個可拖放的段落元素。</p>
<script>
p.ondragstart = function(ev) {
//這里的圖像由於不是頁面中的一個元素，因此不可能通過document對象獲取到，
//只能通過新建一個對象，設置屬性來得到
var img = new Image();
img.src = "img/star.jpg";
ev.dataTransfer.setDragImage(img, 5, 5);
}
</script>
</body>
</html>
3.3，鼠標拖拽實現移動效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>鼠標實現拖拽效果</title>
<style type="text/css">
body {
position: relative;
padding: 0;
margin: 0;
}
img {
position: absolute;
}
</style>
</head>
<body>
<img src="img/p3.png" id="target">
<script type="text/javascript">
// console.log(target)//直接可以同過id打印出<img src="img/p3.png" id="target" >
// var target =document.getElementById("target");//和上者一樣
//第一種方法
// target.ondragstart = function(e) {
// var disX = e.offsetX;
// var disY = e.offsetY;
// console.log(disX, disY)
// target.ondrag = function(e) {
// var x = e.pageX;
// var y = e.pageY;
// // console.log(x,y) ///最后一刻 0 0
// //徐需要注意的是：drag事件最后一刻，無法讀取鼠標的坐標，pageX和pageY都變為0
// if (x == 0 && y == 0) {
// return;
// }
// if (x < 0) {
// x = 0;
// } else if (x > window.innerWidth - this.offsetWidth) {
// x = window.innerWidth - this.offsetWidth
// }
// if (y < 0) {
// y = 0;
// } else if (y > window.innerWidth - this.offsetWidth) {
// y = window.innerWidth - this.offsetWidth
// }
// // // console.log(x,y); //最后一刻無 0 0
// //得到x y的坐標
// x -= disX;
// y -= disY;
// target.style.left = x + 'px';
// target.style.top = y + 'px';
// }
// }
//第二種方法
target.ondragstart = function(e) {
var disX = e.clientX - this.offsetLeft;
var disY = e.clientY - this.offsetTop;
target.ondrag = function(e) {
var x = e.clientX;
var y = e.clientY;
if (x == 0 && y == 0) {
return;
}
x -= disX;
y -= disY;
//限制,源對象不得超過屏幕
if (x < 0) {
x = 0;
} else if (x > window.innerWidth - this.offsetWidth) {
x = window.innerWidth - this.offsetWidth
}
if (y < 0) {
y = 0;
} else if (y > window.innerWidth - this.offsetWidth) {
y = window.innerWidth - this.offsetWidth
}
this.style.left = x + "px";
this.style.top = y + "px";
console.log(x, y)
}
}
</script>
</body>
</html>
<!--
鼠標拖拽改變位置只需要改變源對象
1，開始拖拽 ondragstart
獲得偏移量
2.ontrag
獲得鼠標x，y，
當鼠標最后一刻時；不用此數據
//drag事件最后一刻，無法讀取鼠標的坐標，pageX和pageY都變為0
獲得飛機的x，y
-->
[垃圾桶回收效果 ](https://blog.csdn.net/weixin_44797182/article/details/99128148)
接下一篇文章：https://blog.csdn.net/weixin_44797182/article/details/100588078
待續，，，