整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
什么是拖拽？
本質上來說就是一個對象和一個對象直接傳遞。
其實學習拖拽，就是學習拖拽事件。
⒉在HTML5中很多元素是不能進行拖拽的，比如說圖片和超鏈接：
在試圖拖拽時你會發現一個禁止的符號，如果想拖拽元素，就必須為元素添加draggable="true"。
⒊相關的事件
應用于被拖拽元素的事件
ondrag 應用于拖拽元素，整個拖拽過程都會調用--持續
ondragstart 應用于拖拽元素，當拖拽開始時調用
ondragleave 應用于拖拽元素，當鼠標離開拖拽元素時調用
ondragend 應用于拖拽元素，當拖拽結束時調用
應用于目標元素的事件
ondragenter 應用于目標元素，當拖拽元素進入時調用
ondragover 應用于目標元素，當停留在目標元素上時調用
ondrop 應用于目標元素，當在目標元素上松開鼠標時調用
ondragleave 應用于目標元素，當鼠標離開目標元素時調用
案例：
注意：如果想觸發ondrop事件，那么就必須在ondragover事件中阻止瀏覽器的默認行為。
來源網絡，侵權聯系刪除
私信我或關注微信號：猿來如此呀，回復：學習，獲取免費學習資源包。
我們都知道普通的HTML自帶的功能相對有限，很多復雜的交互式場景，如果手動去寫功能的話會非常的復雜，而且可擴展性差，就拿HTML表格來說，對于初學者或者對于復雜的拖拽式交互編程不熟悉的話會很浪費時間，因此今天就介紹一個第三方的插件——Table-draagger，來輕松實現類似的功能。Table-draagger是用于構建可重排序的拖放表的極簡主義純Javascript庫！
https://github.com/sindu12jun/table-dragger
Table-draagger因為其以下幾個特征而讓拖拽和排序的實現變得如此簡單：
可以在npm上獲得它：
npm install table-dragger --save
或者引用壓縮的js文件
<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>
或者嘗試開發中的不穩定版本
npm install table-dragger@next --save
請看以下代碼：
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);
});
你可以在不設置任何參數的情況下使用默認的拖拽和排序方式，當然以下是你可以配置的選項：
1、將mode設置為column，用戶拖動和排序表的列
2、將mode設置為row，用戶拖動并排序表的行
3、設置mode為free，用戶根據點擊后鼠標移動的方向拖動行或列。注意，必須在自由模式下指定dragHandler。
dragHandler是表中的拖動句柄選擇器默認情況下，在列模式下，dragHandler是表的第一行；在行模式下，則是第一列。
在行模式下將onlyBody設置為true時，用戶只能在tbody中提升行。
下面是返回對象的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}`);
});
Table-draagger為我們節省了很多手動封裝表格排序和拖拽功能的時間，當然目前很多第三方框架已經實現了類似的功能，這更適用于原生的html表格，你還可以通過一些手段記憶用戶拖拽，這只是其中一種思路，Enjoy it！~
拽成為一項標準也是近幾年的事，屬于HTML5中的一部分，作為一種交互行為，拖拽是被廣泛應用再界面軟件中的，例如桌面應用，word、QQ軟件都有拖拽行為。
在HTML5標準實施之前，拖拽也是被廣泛使用的，web開發者將click、mouseover,mousemove組合起來實現拖拽邏輯，過程略顯冗余和繁瑣。
一言蔽之，HTML5的出現讓拖拽開發變得簡單
先來一張流程圖
下圖描繪了拖拽的流程.
要點概括總結
結合上圖，我們梳理下知識點，做個拆分與解析。
一共有哪些事件
哪些實體可以被拖
draggable wordContainerEle.onselectstart = event => false;
這意味著：
需要說明的是，一個元素被設置draggable之后，里面的文本就無法被選中了（chrome測試如此）。
關于放，有哪些限制？
拖放會冒泡嘛？
答案是肯定的。假設一個父元素包含一個子元素，理所當然地，用戶拖子元素也是間接的拖動父元素的過程。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
