什么是拖拽？

本質(zhì)上來說就是一個(gè)對(duì)象和一個(gè)對(duì)象直接傳遞。

其實(shí)學(xué)習(xí)拖拽，就是學(xué)習(xí)拖拽事件。

⒉在HTML5中很多元素是不能進(jìn)行拖拽的，比如說圖片和超鏈接：

在試圖拖拽時(shí)你會(huì)發(fā)現(xiàn)一個(gè)禁止的符號(hào)，如果想拖拽元素，就必須為元素添加draggable="true"。

⒊相關(guān)的事件

應(yīng)用于被拖拽元素的事件

ondrag 應(yīng)用于拖拽元素，整個(gè)拖拽過程都會(huì)調(diào)用--持續(xù)

ondragstart 應(yīng)用于拖拽元素，當(dāng)拖拽開始時(shí)調(diào)用

ondragleave 應(yīng)用于拖拽元素，當(dāng)鼠標(biāo)離開拖拽元素時(shí)調(diào)用

ondragend 應(yīng)用于拖拽元素，當(dāng)拖拽結(jié)束時(shí)調(diào)用

應(yīng)用于目標(biāo)元素的事件

ondragenter 應(yīng)用于目標(biāo)元素，當(dāng)拖拽元素進(jìn)入時(shí)調(diào)用

ondragover 應(yīng)用于目標(biāo)元素，當(dāng)停留在目標(biāo)元素上時(shí)調(diào)用

ondrop 應(yīng)用于目標(biāo)元素，當(dāng)在目標(biāo)元素上松開鼠標(biāo)時(shí)調(diào)用

ondragleave 應(yīng)用于目標(biāo)元素，當(dāng)鼠標(biāo)離開目標(biāo)元素時(shí)調(diào)用

案例：

注意：如果想觸發(fā)ondrop事件，那么就必須在ondragover事件中阻止瀏覽器的默認(rèn)行為。

來源網(wǎng)絡(luò)，侵權(quán)聯(lián)系刪除

私信我或關(guān)注微信號(hào)：猿來如此呀，回復(fù)：學(xué)習(xí)，獲取免費(fèi)學(xué)習(xí)資源包。

紹

我們都知道普通的HTML自帶的功能相對(duì)有限，很多復(fù)雜的交互式場(chǎng)景，如果手動(dòng)去寫功能的話會(huì)非常的復(fù)雜，而且可擴(kuò)展性差，就拿HTML表格來說，對(duì)于初學(xué)者或者對(duì)于復(fù)雜的拖拽式交互編程不熟悉的話會(huì)很浪費(fèi)時(shí)間，因此今天就介紹一個(gè)第三方的插件——Table-draagger，來輕松實(shí)現(xiàn)類似的功能。Table-draagger是用于構(gòu)建可重排序的拖放表的極簡(jiǎn)主義純Javascript庫！

Github

https://github.com/sindu12jun/table-dragger

特征

Table-draagger因?yàn)槠湟韵聨讉€(gè)特征而讓拖拽和排序的實(shí)現(xiàn)變得如此簡(jiǎn)單：

• 非常容易配置
• 能夠同時(shí)對(duì)列或行進(jìn)行排序
• 排序時(shí)動(dòng)畫流暢
• 沒有臃腫的依賴
• 提供觸摸事件（意味著在觸摸設(shè)備可以實(shí)現(xiàn)一些你想要的功能）

安裝使用

• 安裝

可以在npm上獲得它：

npm install table-dragger --save

或者引用壓縮的js文件

<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>

或者嘗試開發(fā)中的不穩(wěn)定版本

npm install table-dragger@next --save

• 快速入門

請(qǐng)看以下代碼：

import tableDragger from 'table-dragger'
tableDragger(el, options?)

<table id="table">
<thead>
<tr>
<th class='handle'>header1</th>
<th class='handle'>header2</th>
</tr>
</thead>
<tbody>
<tr>
<td>conten1</td>
<td>conten2</td>
</tr>
</tbody>
</table>

var el = document.getElementById('table');
var dragger = tableDragger(el, {
mode: 'row',
dragHandler: '.handle',
onlyBody: true,
});
dragger.on('drop',function(from, to){
console(from);
console(to);
});

你可以在不設(shè)置任何參數(shù)的情況下使用默認(rèn)的拖拽和排序方式，當(dāng)然以下是你可以配置的選項(xiàng)：

• options.mode

1、將mode設(shè)置為column，用戶拖動(dòng)和排序表的列

2、將mode設(shè)置為row，用戶拖動(dòng)并排序表的行

3、設(shè)置mode為free，用戶根據(jù)點(diǎn)擊后鼠標(biāo)移動(dòng)的方向拖動(dòng)行或列。注意，必須在自由模式下指定dragHandler。

• options.dragHandler

dragHandler是表中的拖動(dòng)句柄選擇器默認(rèn)情況下，在列模式下，dragHandler是表的第一行；在行模式下，則是第一列。

• options.onlyBody

在行模式下將onlyBody設(shè)置為true時(shí)，用戶只能在tbody中提升行。

• API

下面是返回對(duì)象的API

tableDragger(document.querySelector('#event-table'), { mode: 'free', dragHandler: '.handle', onlyBody: true })
.on('drag', () => {
console.log('drag');
})
.on('drop', (from, to, el, mode) => {
console.log(`drop ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('shadowMove', (from, to, el, mode) => {
console.log(`move ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('out', (el, mode) => {
console.log(`move out or drop ${el.nodeName} in mode ${mode}`);
});

總結(jié)

Table-draagger為我們節(jié)省了很多手動(dòng)封裝表格排序和拖拽功能的時(shí)間，當(dāng)然目前很多第三方框架已經(jīng)實(shí)現(xiàn)了類似的功能，這更適用于原生的html表格，你還可以通過一些手段記憶用戶拖拽，這只是其中一種思路，Enjoy it！~

拽成為一項(xiàng)標(biāo)準(zhǔn)也是近幾年的事，屬于HTML5中的一部分，作為一種交互行為，拖拽是被廣泛應(yīng)用再界面軟件中的，例如桌面應(yīng)用，word、QQ軟件都有拖拽行為。

在HTML5標(biāo)準(zhǔn)實(shí)施之前，拖拽也是被廣泛使用的，web開發(fā)者將click、mouseover,mousemove組合起來實(shí)現(xiàn)拖拽邏輯，過程略顯冗余和繁瑣。

一言蔽之，HTML5的出現(xiàn)讓拖拽開發(fā)變得簡(jiǎn)單

先來一張流程圖

下圖描繪了拖拽的流程.

要點(diǎn)概括總結(jié)

結(jié)合上圖，我們梳理下知識(shí)點(diǎn)，做個(gè)拆分與解析。

一共有哪些事件

• 拖： dragstart , drag , dragend
• 放： dragenter , dragover ， dragleave , drop

哪些實(shí)體可以被拖

draggable
wordContainerEle.onselectstart = event => false;

這意味著：

• 元素 默認(rèn)禁止拖拽 （貌似都是），需要手動(dòng)設(shè)置draggable屬性為true。
• 文字默認(rèn)都是能選中的，這個(gè)大家都習(xí)以為常了。

需要說明的是，一個(gè)元素被設(shè)置draggable之后，里面的文本就無法被選中了（chrome測(cè)試如此）。

關(guān)于放，有哪些限制？

• dragenter :都可以。
• dragover :都可以
• dragleave :都可以
• drop :只有在 dragover監(jiān)聽中阻止默認(rèn)行為 ，才能觸發(fā)drop

拖放會(huì)冒泡嘛？

答案是肯定的。假設(shè)一個(gè)父元素包含一個(gè)子元素，理所當(dāng)然地，用戶拖子元素也是間接的拖動(dòng)父元素的過程。