整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
拽成為一項標準也是近幾年的事，屬于HTML5中的一部分，作為一種交互行為，拖拽是被廣泛應用再界面軟件中的，例如桌面應用，word、QQ軟件都有拖拽行為。
在HTML5標準實施之前，拖拽也是被廣泛使用的，web開發者將click、mouseover,mousemove組合起來實現拖拽邏輯，過程略顯冗余和繁瑣。
一言蔽之，HTML5的出現讓拖拽開發變得簡單
先來一張流程圖
下圖描繪了拖拽的流程.
要點概括總結
結合上圖，我們梳理下知識點，做個拆分與解析。
一共有哪些事件
哪些實體可以被拖
draggable wordContainerEle.onselectstart = event => false;
這意味著：
需要說明的是，一個元素被設置draggable之后，里面的文本就無法被選中了（chrome測試如此）。
關于放，有哪些限制？
拖放會冒泡嘛？
答案是肯定的。假設一個父元素包含一個子元素，理所當然地，用戶拖子元素也是間接的拖動父元素的過程。
近在摸魚的過程中，發現了一個拖動組件，發現挺有意思的。于是想到在HTML5原生就支持這個功能，于是就想著自己也試著弄一個小demo試試看
最早在網頁中引入拖放功能的是IE4。當時，網頁中只有兩種對象可以拖放，圖像和某些文本。拖動圖像時，先把鼠標放在圖像上，按住鼠標不放就可以拖動它。拖動文本時，要先選中文本，然后就可以想要拖動圖像那樣拖動。在IE4中，唯一有效的防止目標是文本框，到了IE5，拖放功能添加了新的時間，網頁中幾乎任意元素都可以作為目標元素。HTML5以IE的實例為基礎制訂了拖放規范。
代碼
拖動樣式
通過div添加draggable屬性為true之后，我們已經可以進行簡單的拖動了。那么拖動已經是可以拖動了，我們需要另一個地方來接收拖動，所以我們對代碼做了些修改
來回拖動案例
文字支持在兩個框中拖動
需要注意的點
1.需要設置要移動屬性draggable的屬性值為true才支持拖拽
2.dataTransfer.setData設置了被拖動的數據類型和值
3.dataTransfer.getData("Text") 方法獲得被拖的數據。
4.當放置被拖數據時，會發生 drop 事件，調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）。
draggable元素是否可拖拽 - true 可拖拽 - false 不可拖拽 - auto 跟隨瀏覽器定義是否可以拖拽
dragstart() - 當用戶開始拖拽一個元素或者一個文本選取區塊的時觸發 drag() - 當用戶正在拖拽一個元素或者一個文本選取區塊的時觸發 dragend() - 當用戶結束拖拽一個元素或者一個文本選取區塊的時觸發
dragenter - 當一個元素或文字選取區塊被拖曳移動進入一個有效的放置目標時觸發 dragover - 當一個元素或文字選取區塊被拖曳移動經過一個有效的放置目標時觸發 dragleave - 當一個元素或文字選取區塊被拖曳移動離開一個有效的放置目標時觸發 dragexist - 當一個元素不再是被選取中的拖曳元素時觸發 drop -當一個元素或文字選取區塊被放置至一個有效的放置目標時觸發
屬性 - types 只讀屬性。它返回一個我們在dragstart事件中設置的拖動數據格式的數組。 格式順序與拖動操作中包含的數據順序相同。 - files 返回拖動操作中的文件列表。包含一個在數據傳輸上所有可用的本地文件列表。如果拖動操作不涉及拖動文件，此屬性是一個空列表。 - dropEffect 獲取當前選定的拖放操作的類型或將操作設置為新類型[none、move、copy、link] - effectAllowed 指定拖放操作所允許的效果[none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized] 方法 void setData(format, data) - 將拖動操作的拖動數據設置為指定的數據和類型。format可以是MIME類型 String getData(format) - 返回指定格式的數據，format與setData()中一致 void clearData([format]) - 刪除給定類型的拖動操作的數據。如果給定類型的數據不存在，此方法不執行任何操作。如果不給定參數，則刪除所有類型的數據。 void setDragImage(img, x, y) - 指定一副圖像，當拖動發生時，顯示在光標下方。大多數情況下不用設置，因為被拖動的節點被創建成默認圖片。x,y參數分別指示圖像的水平、垂直偏移量
瀏覽器支持情況
簡單幾行代碼就實現簡單拖拽效果，如果不使用原生drop要實現拖拽效果需要比較復雜，兼容性方面的問題也沒有特別大的問題（IE除外），相信在今后的工作中會有機會用到。當然在使用過程中也遇到一個問題，當放置被拖數據時，會發生 drop 事件，調用 preventDefault來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開），如果不使用preventDefault，則不會觸發drop事件，則拖拽就不會觸發。
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
1.點擊彈出框，狀態框和遮擋層（背景變灰）就會顯示出來 display：block；
2.點擊關閉按鈕，模態框和遮擋層就會隱藏起來 display：none;
3.在頁面中拖拽的原理：鼠標按下并且移動，之后松開鼠標
4.觸發事件是鼠標按下mousedown，鼠標移動mousemove，鼠標松開mouseup
5.推拽過程：鼠標移動過程中，獲得最新的值賦給模態框的left和top值，這樣模態框就可以跟著鼠標走了
6.鼠標按下出發的事件源是最上面一行，就是id為title
7.鼠標的坐標減去鼠標在盒子內的坐標，才是真正模態框的位置
8.鼠標按下，我們要得到鼠標在盒子的坐標
9.鼠標移動，就讓模態框的坐標設置為：鼠標坐標減去盒子坐標即可，注意移動事件寫到按下事件里面
10.鼠標松開，就是停止拖拽，就是可以讓鼠標移動事件解除
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
