js拖拽事件
阿新 • • 發佈：2021-02-06
技術標籤：javascriptjavascripthtml5
javascript 事件之拖拽事件
首先，在瞭解拖拽事件之前我們先了解一下，拖拽事件都會用到哪些知識。
在拖拽目標上發生的事件（源元素）
| ondragstart | 用於元素開始被拖拽 |
|---|---|
| ondrag | 元素正在被拖拽 |
| ondragend | 使用者完成拖拽事件後 |
釋放目標後發生的事件:
| ondragenter | 當滑鼠拖動目標物件進入到目標容器中觸發該事件 |
|---|---|
| ondragover | 當某物件在另一個容器中被拖拽時觸發該事件（已經從被拖拽進來，又開始被拖拽） |
| ondragleave | 當滑鼠拖動元素離開其容器時觸發該事件 |
| ondrop | 在滑鼠拖動過程中釋放滑鼠後觸發事件 |
這是拖拽事件的基本知識點，下面我們根據具體事例進行演練
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript事件篇之拖拽事件</title>
<style type="text/css">
.dragtarget
{
width: 200px;
height: 100px;
text-align: center;
border 具體介紹：
首先，html部分簡單的佈局了兩個div容器，其中一個div中容納了一個p標籤，第一個div中的p標籤中要寫上id，下面會講解為什麼會加上id，並且給改元素加上draggable屬性，將其設定為true，（意思是將該元素設定為可拖動），我們試想一下，p標籤好比是我們，容器是火車站，當我們開始拖拽目標元素時，就是用到dragstart，他需要獲取到該元素的具體資訊，也就是id和元素型別，用到了,event.dataTransfer.setData(),其中dataTransfer是資料傳輸，傳輸的內容用setData來設定（format，id）這時用到id，因為id是我們獲取資訊的標識，這就是火車站裡面的站牌資訊，什麼時候開始上車，當我們瞭解到站臺資訊時開始上車。
那另一個容器就是目的地，我們下車時也需要過安檢，看看人家能否讓你通過，這時就用到了preventDefault（）方法，（不阻止預設動作），當滑鼠松下時我們允許他放置，這時就用到了ondrop（）。放下時我們需要在另一個容器中新增目標元素，appendchild（新增一個子節點）
具體演示：
