HTML5使用JavaScript實現拖放效果
HTML5 提供了拖放 drag 和 drop 的 API，可以實現在不同的應用程式之間的拖放
實現拖放主要有以下步驟：
將物件的屬性設定為可拖放，即“draggable=‘true’”。
編寫有關拖放事件的處理方法
拖放
相關的事件
事件
產生事件的元素
說明
dragstart
被拖放的元素
開始拖放操作資料庫
drag
被拖放的元素
拖放過程中
dragenter
拖放過程中滑鼠經過的元素
被拖放的元素開始進入本元素的範圍內
dragover
事拖放過程中滑鼠經過的元素
被拖放的元素正在本元素範圍內移動
dragleave
拖放過程中滑鼠經過的元素
被拖放的元素離開本元素的範圍
drop
拖放的目標元素
有其他元素被拖放到了本元素中
dragend
拖放的目標元素
拖放操作結束
dataTransfer物件
①dataTransfer 物件是事件物件的一個屬性，用於從拖拽元素向放置目標傳遞字串格式的資料
②只能在拖放事件的事件處理程式中訪問 dataTransfer 物件
③在事件處理程式中，可以使用物件的屬性和方法來完善拖放功能
dataTransfer 物件的常用方法：
方法
說明
clearData（format）
清除 dataTransfer 物件中存放的資料，如果省略引數，則清除全部資料
setData（format，data）
向 dataTransfer 物件中存入資料
getData（format）
從 dataTransfer 物件中讀取資料
setDragImage（image，x，y）
用 img 元素來設定拖放圖示
dataTransfer 物件的常用屬性：
屬性名
說明
dropEffect
表示拖放操作的視覺效果。該效果必須用在 effectAllowed 屬性指定且允許的視覺效果範圍內，允許指定的值為 none、copy、link 和 move
effectAllowed
用來指定當元素被拖放時所允許的視覺效果，可以指定的值為 none、copy、copyLink、copyMove、link、linkMove、move、all 和 uninitialize
type
存入資料的種類，字串的偽陣列
拖放示例：
<！DOCTYPE html>
<
html
lang
=
“en”
>
<
head
>
<
meta
charset
=
“UTF-8”
>
<
meta
name
=
“viewport”
content
=
“width=device-width， initial-scale=1。0”
>
<
title
>
拖拽功能的實現
title
>
<
style
>
。
box
{
width
：
200
px
；
height
：
500
px
；
border
：
2
px
dashed
green
；
float
：
left
；
margin-right
：
20
px
；
}
。
div
{
width
：
100
px
；
height
：
100
px
；
border
：
1
px
solid
#000
；
}
#
box1
，
#
box2
{
background
：
red
；
}
#
box3
，
#
box4
{
background
：
yellow
；}
#
box5
{
background
：
green
；}
style
>
head
>
<
body
>
<
div
id
=
“list”
class
=
“box”
ondrop
=
“drop（event）”
ondragover
=
“over（event）”
>
<
h1
>
盒子列表
h1
>
<
div
id
=
“box1”
class
=
“div”
draggable
=
“true”
ondragstart
=
“start（event）”
>
div
>
<
div
id
=
“box2”
class
=
“div”
draggable
=
“true”
ondragstart
=
“start（event）”
>
div
>
<
div
id
=
“box3”
class
=
“div”
draggable
=
“true”
ondragstart
=
“start（event）”
>
div
>
<
div
id
=
“box4”
class
=
“div”
draggable
=
“true”
ondragstart
=
“start（event）”
>
div
>
<
div
id
=
“box5”
class
=
“div”
draggable
=
“true”
ondragstart
=
“start（event）”
>
div
>
div
>
<
div
id
=
“list1”
class
=
“box”
ondrop
=
“drop（event）”
ondragover
=
“over（event）”
>
<
h1
>
紅色盒子
h1
>
div
>
<
div
id
=
“list2”
class
=
“box”
ondrop
=
“drop（event）”
ondragover
=
“over（event）”
>
<
h1
>
黃色盒子
h1
>
div
>
<
div
id
=
“list3”
class
=
“box”
ondrop
=
“drop（event）”
ondragover
=
“over（event）”
>
<
h1
>
綠色盒子
h1
>
div
>
<
script
>
//拖拽結束事件
function
over
（
e
）{
//阻止盒子原來的預設屬性
e
。
preventDefault
（）；
}
//拖拽過程中事件
function
drop
（
e
）{
var
dt
=
e
。
dataTransfer
；
//拿到之前setData（“id”）
var
id
=
dt
。
getData
（
“id”
）；
//給它建立一個標籤進行生成
e
。
target
。
appendChild
（
document
。
getElementById
（
id
））；
}
//拖拽開始事件
function
start
（
e
）
{
var
dt
=
e
。
dataTransfer
；
console
。
log
（
e
。
target
。
id
）；
dt
。
setData
（
“id”
，
e
。
target
。
id
）；
}
script
>
body
>
html
>
實現效果：
上一篇:助聽器是什麼牌子的效果好？
下一篇：泰國潑水節 潑潑潑攻略！
