今天小編給大家?guī)?lái)有關(guān)于:“前端中怎么實(shí)現(xiàn)拖放效果?”這個(gè)問(wèn)題的相關(guān)內(nèi)容分享,希望對(duì)剛學(xué)習(xí)的小伙伴們有所幫助!
一、什么是拖放
拖放就是通過(guò)鼠標(biāo)放在一個(gè)物體上,按住鼠標(biāo)不放就可以把一個(gè)物體托動(dòng)到另一個(gè)位置。其實(shí)我們平時(shí)一直都有接觸,如圖
那么在網(wǎng)頁(yè)上其實(shí)也可以實(shí)現(xiàn)同樣效果的拖放功能,如圖
那么,就讓我們來(lái)看看如何實(shí)現(xiàn)的吧
二、拖放事件
在IE4的時(shí)候,Js就可以實(shí)現(xiàn)拖放功能了,當(dāng)時(shí)只支持拖放圖像和一些文本。后來(lái)隨著IE版本的更新,拖放事件也在慢慢完善,HTML5就以IE的拖放功能制定了該規(guī)范,F(xiàn)irefox 3.5、Safari 3+、chrome以及它們之后的版本都支持了該功能。
默認(rèn)情況下,網(wǎng)頁(yè)中的圖像、鏈接和文本是可以拖動(dòng)的,而其余的元素若想要被拖動(dòng),必須將 draggable
屬性設(shè)置為 true
,這是HTML5規(guī)定的新屬性,用于設(shè)置元素是否能被拖動(dòng)。因此,圖像、鏈接、文本的 draggable
屬性默認(rèn)為 true
,其余元素的 draggable
屬性默認(rèn)為 false
在實(shí)現(xiàn)拖放功能時(shí)有這樣兩個(gè)概念,分別是被拖動(dòng)元素和目標(biāo)元素,它們都有各自支持的事件,那么我們來(lái)了解一下
(1)被拖動(dòng)元素的事件
被拖動(dòng)元素所支持的事件如下表所示
事件 | 含義 |
---|---|
dragstart | 準(zhǔn)備拖動(dòng)被拖動(dòng)元素時(shí)觸發(fā) |
drag | 拖動(dòng)的過(guò)程中觸發(fā)(頻繁觸發(fā)) |
dragend | 拖動(dòng)結(jié)束時(shí)觸發(fā) |
我們來(lái)用一個(gè)例子測(cè)試一下這三個(gè)事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div draggable='true'></div>
<script>
let box = document.querySelector('.box')
// 綁定dragstart事件
box.addEventListener('dragstart', function() {
console.log('拖拽開(kāi)始了');
})
// 綁定drag事件
box.addEventListener('drag', function() {
console.log('元素被拖動(dòng)');
})
// 綁定dragend事件
box.addEventListener('dragend', function() {
console.log('拖拽結(jié)束');
})
</script>
</body>
</html>
我們來(lái)看看測(cè)試效果
(2)目標(biāo)元素的事件
在實(shí)現(xiàn)拖放功能的過(guò)程中,目標(biāo)元素上的事件有如下三個(gè)
事件 | 含義 |
---|---|
dragenter | 被拖放元素進(jìn)入目標(biāo)元素時(shí)觸發(fā) |
dragover | 被拖放元素在目標(biāo)元素內(nèi)時(shí)觸發(fā)(頻繁觸發(fā)) |
dragleave | 被拖動(dòng)元素離開(kāi)目標(biāo)元素時(shí)觸發(fā) |
drop | 當(dāng)被拖動(dòng)元素被放到了目標(biāo)元素中時(shí)觸發(fā) |
這里我要詳細(xì)講解一下這三個(gè)事件的觸發(fā)規(guī)則:
- dragenter事件與
mouseover
事件類似,那怎樣才算被拖放元素進(jìn)入目標(biāo)元素呢?經(jīng)過(guò)測(cè)試發(fā)現(xiàn),當(dāng)被拖放元素的一半以上面積在目標(biāo)元素內(nèi)才算進(jìn)入了目標(biāo)元素 - dragover事件比較特殊,當(dāng)拖放元素進(jìn)入目標(biāo)元素以后就會(huì)一直觸發(fā),就跟你設(shè)置了一個(gè)無(wú)限循環(huán)的定時(shí)器一樣,即使你不移動(dòng)元素也會(huì)觸發(fā),除非拖放事件結(jié)束或者被拖放元素離開(kāi)目標(biāo)元素
- dragleave事件 的其觸發(fā)條件正好與
dragenter
事件相反,它是當(dāng)被拖放元素離開(kāi)目標(biāo)元素時(shí)觸發(fā),經(jīng)過(guò)測(cè)試,離開(kāi)目標(biāo)元素的條件是:被拖放元素一半以上的面積離開(kāi)目標(biāo)元素 - drop事件 可以叫做放置目標(biāo)事件,它是當(dāng)被拖放元素放置到了目標(biāo)元素中時(shí)觸發(fā)。雖然任何元素都支持該事件,但是所有元素默認(rèn)都是不允許被放置的,所以在不做任何處理的情況下,該事件是不會(huì)觸發(fā)的
同樣的,我們來(lái)用具體的例子,先來(lái)體會(huì)一下前三個(gè)事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: lightgreen;
}
.location{
width: 100px;
height: 100px;
background-color: lightpink;
}
</style>
</head>
<body>
<div draggable='true'></div>
<div ></div>
<script>
let located = document.querySelector('.location')
// 綁定dragenter事件
located.addEventListener('dragenter', function() {
console.log('元素進(jìn)入了目標(biāo)元素');
})
// 綁定dragover事件
located.addEventListener('dragover', function() {
console.log('元素在目標(biāo)元素內(nèi)');
})
// 綁定dragleave事件
located.addEventListener('dragleave', function() {
console.log('元素離開(kāi)了目標(biāo)元素');
})
</script>
</body>
</html>
我們來(lái)看看測(cè)試效果,這里你們要仔細(xì)看被拖放元素多少面積進(jìn)入或離開(kāi)目標(biāo)元素時(shí)才觸發(fā)的對(duì)應(yīng)事件
那么最后我們?cè)賮?lái)將一下如何才能觸發(fā) drop事件,只需要阻止 dragenter事件 和 dragover事件 的默認(rèn)行為即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: lightgreen;
}
.location{
width: 100px;
height: 100px;
background-color: lightpink;
}
</style>
</head>
<body>
<div draggable='true'></div>
<div ></div>
<script>
let located = document.querySelector('.location')
located.addEventListener('dragenter', function(e) {
e.preventDefault()
})
located.addEventListener('dragover', function(e) {
e.preventDefault()
})
located.addEventListener('drop', function() {
console.log('元素被放置');
})
</script>
</body>
</html>
來(lái)看下測(cè)試效果圖
值得注意的是,在我們沒(méi)有對(duì) drop事件 做處理之前,將被拖放元素拖動(dòng)到目標(biāo)元素中時(shí),鼠標(biāo)樣式會(huì)變成禁止的樣式,如圖
而當(dāng)我們?cè)O(shè)置元素為可放置了以后,鼠標(biāo)樣式是這樣的。如圖
三、dataTransfer對(duì)象
上面只是簡(jiǎn)簡(jiǎn)單單地實(shí)現(xiàn)了拖放功能,但并沒(méi)用利用該功能做出什么實(shí)際性的功能,這里我們介紹一個(gè)拖放事件中事件對(duì)象上的一個(gè)特別重要的屬性——dataTransfer
我們通過(guò) event.dataTransfer
來(lái)獲取該對(duì)象,其主要的作用就是從被拖放元素向目標(biāo)元素傳遞一個(gè)字符串?dāng)?shù)據(jù)
(1)方法
dataTransfer上有兩個(gè)方法,如下表所示
方法 | 含義 |
---|---|
setData | 設(shè)置字符串,并設(shè)置數(shù)據(jù)類型 |
getData | 獲取對(duì)應(yīng)數(shù)據(jù)類型的字符串 |
setData() 方法接收兩個(gè)參數(shù),第一個(gè)參數(shù)表示的是字符串的數(shù)據(jù)類型,HTML5規(guī)定了兩種數(shù)據(jù)類型,分別是 text/plain
和 text/uri-list
,前者表示普通字符串,后者表示URL字符串;第二個(gè)參數(shù) 就是用于存放的字符串
getData() 方法只接收一個(gè)參數(shù),即需要接收的字符串類型
我們來(lái)簡(jiǎn)單使用一下這兩個(gè)方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: lightgreen;
}
.location{
width: 100px;
height: 100px;
background-color: lightpink;
}
</style>
</head>
<body>
<div draggable='true'></div>
<div ></div>
<script>
let box = document.querySelector('.box')
// 為被拖放元素綁定 dragstart 事件
box.addEventListener('dragstart', function(e) {
// 設(shè)置類型為 text/plain 的 字符串
e.dataTransfer.setData('text/plain', '我是拖放開(kāi)始時(shí)被設(shè)置的字符串')
})
let located = document.querySelector('.location')
located.addEventListener('dragenter', function(e) {
e.preventDefault()
})
located.addEventListener('dragover', function(e) {
e.preventDefault()
})
located.addEventListener('drop', function(e) {
// 將被拖放元素放置到目標(biāo)元素時(shí)獲取字符串
let res = e.dataTransfer.getData('text/plain')
console.log(res);
})
</script>
</body>
</html>
來(lái)看下測(cè)試結(jié)果
(2)屬性
在 dataTransfer對(duì)象 上還有兩個(gè)比較常用的屬性,如下表所示
屬性 | 含義 |
---|---|
dropEffect | 被拖放元素的放置行為 |
effectAllowed | 目標(biāo)元素支持的放置行為 |
首先說(shuō)一下,這個(gè)兩個(gè)屬性需要搭配使用,它們決定了被拖放元素 和 目標(biāo)元素 之間的關(guān)系的,當(dāng)設(shè)定好兩者的關(guān)系后,在進(jìn)行拖動(dòng)操作的時(shí)候,鼠標(biāo)會(huì)根據(jù)不同的關(guān)系顯示不同的樣式,除此之外,沒(méi)有別的特別的作用。
dropEffect 可以設(shè)置以下幾個(gè)屬性
值 | 含義 |
---|---|
none | 默認(rèn)值。不能把拖動(dòng)的元素放在這里 |
move | 應(yīng)該把拖動(dòng)的元素移動(dòng)到該目標(biāo)元素 |
copy | 應(yīng)該把拖動(dòng)元素復(fù)制到該目標(biāo)元素 |
link | 表示目標(biāo)元素會(huì)打開(kāi)被拖放進(jìn)來(lái)的元素對(duì)應(yīng)的鏈接 |
【注意】:dropEffect 屬性必須在 dragenter事件 中設(shè)置,否則無(wú)效
effectAllowed 可以設(shè)置以下幾個(gè)屬性
值 | 含義 |
---|---|
uninitialized | 被拖放元素沒(méi)有設(shè)置放置性為 |
none | 被拖放元素不能有放置性為 |
copy | 只允許值為 ‘copy’ 的 dropEffect 目標(biāo)元素 |
link | 只允許值為 ‘link’ 的 dropEffect 目標(biāo)元素 |
move | 只允許值為 ‘move’ 的 dropEffect 目標(biāo)元素 |
copyLink | 只允許值為 ‘copy’ 和 ‘link’ 的 dropEffect 目標(biāo)元素 |
copymove | 只允許值為 ‘copy’ 和 ‘move’ 的 dropEffect 目標(biāo)元素 |
linkMove | 只允許值為 ‘link’ 和 ‘move’ 的 dropEffect 目標(biāo)元素 |
all | 只允許任意值的 dropEffect 目標(biāo)元素 |
【注意】:effectAllowed 屬性必須在 dragstart事件 中設(shè)置,否則無(wú)效
上面也說(shuō)了,這兩個(gè)屬性基本上只是用來(lái)改變鼠標(biāo)樣式的,所以如果想實(shí)現(xiàn)特定的功能還得我們自己來(lái)重寫事件的處理函數(shù)。
下面來(lái)看一個(gè)拖放實(shí)例:
需求: 將一段文本拖放到一個(gè)元素中
因?yàn)槲谋臼悄J(rèn)支持的拖放元素,所以我們可以不對(duì)其做任何的事件綁定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.location{
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">我是一段測(cè)試文字</div>
<div class="location"></div>
<script>
let located = document.querySelector('.location')
located.addEventListener('dragenter', function(e) {
e.dataTransfer.dropEffect = 'copy'
e.preventDefault()
})
located.addEventListener('dragover', function(e) {
e.preventDefault()
})
located.addEventListener('drop', function(e) {
e.target.innerHTML = e.dataTransfer.getData('text/plain')
})
</script>
</body>
</html>
測(cè)試動(dòng)圖
四、結(jié)束語(yǔ)
那么今天有關(guān)于:“前端中怎么實(shí)現(xiàn)拖放效果?”這方面的相關(guān)內(nèi)容分享就到這邊了,更多相關(guān)HTML5拖放功能內(nèi)容可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解!