DragEvent是一個表示drag和drop交互的DOM event接口危喉。用戶通過將指針設備（如：鼠標）放在目標的表面開始拖動钻趋，然后拖動指針到一個新的位置（如其他DOM元素）。應用程序自動的解析拖放交互毁靶。DragEvent接口從mouseEvent和Event那兒繼承屬性胧奔。
Event types
DragEvent并不是一個單一的事件，它包含了多個事件预吆，這些事件分別是：drag龙填，dragstart，dragenter啡浊，dragend觅够，dragover，dragexit巷嚣，dragleave喘先，drop。
drag：這個事件在元素拖拽的過程中反復觸發(fā)廷粒，每一百毫秒觸發(fā)一次窘拯。這事件的目標元素是被拖的那個元素，該事件可冒泡坝茎，可取消默認行為涤姊。
dragstart：這個事件在用戶開始拖動時觸發(fā)。這個事件的目標元素是被拖的那個元素嗤放，在這些事件中思喊，dragstart事件最先觸發(fā)。該事件可冒泡次酌，可取消默認行為恨课。
dragenter：這個事件在被拖的元素進入一個合法的可drop目標時觸發(fā)。這個事件的目標元素是這個可drop目標岳服。該事件可冒泡剂公，可取消默認行為。
dragover：當被拖的元素在可drop目標范圍內移動時反復觸發(fā)這個事件吊宋，一百毫秒觸發(fā)一次纲辽。這個事件的目標元素是這個可drop目標。該事件可冒泡，可取消默認行為拖吼。
dragend：當拖拽結束時觸發(fā)這個事件鳞上，這個事件的目標元素是被拖的元素。在這些事件中dragend最后觸發(fā)绿贞。該事件可冒泡因块，不能取消默認行為。
dragleave：這個事件在被拖得元素離開合法的可drop目標時觸發(fā)籍铁。這個事件的目標元素是這個可drop目標涡上。該事件可冒泡，不能取消默認行為拒名。
dragexit：當一個可drop元素不再是拖拽操作最近的drop目標時觸發(fā)這個事件吩愧。這個事件的目標元素是這個可drop元素。該事件可冒泡增显，不嫩取消默認行為雁佳。
drop：當在可drop目標上松開拖動元素的指針設備時觸發(fā)這個事件，該事件的目標元素是這個可drop目標同云。drop事件在dragend事件觸發(fā)之前觸發(fā)糖权。這個事件可冒泡，可取消默認行為炸站。
? ? ? ? test target? ? ? ? ? ? #drag{
? ? ? ? ? ? width:200px;
? ? ? ? ? ? height:200px;
? ? ? ? ? ? background-color: aqua;
? ? ? ? }
? ? ? ? .drop{
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: antiquewhite;
? ? ? ? }
? ? ? ?
? ?
? ? ? ? ? ? document.addEventListener('drag',function(event){? ? ? ? ? ? event.target.style.backgroundColor = 'black';
? ? ? ? },false);
? ? ? ? document.addEventListener('dragstart',function(event){
? ? ? ? ? ? event.target.style.backgroundColor = 'red';
? ? ? ? },false);
? ? ? ? document.addEventListener('dragend',function(event){
? ? ? ? ? ? event.target.style.backgroundColor = 'yellow';
? ? ? ? },false);
? ? ? ? document.addEventListener('dragover',function(event){
? ? ? ? ? ? event.preventDefault();
? ? ? ? ? ? event.target.style.backgroundColor = 'blue';
? ? ? ? },false);
? ? ? ? document.addEventListener('dragenter',function(event){
? ? ? ? ? ? event.target.style.backgroundColor = 'green';
? ? ? ? },false);
? ? ? ? document.addEventListener('dragleave',function(event){
? ? ? ? ? ? event.target.style.backgroundColor = 'pink';
? ? ? ? },false);
? ? ? ? document.addEventListener('dragexit',function(event){
? ? ? ? ? ? event.target.style.backgroundColor = 'red'? ? ? ? },false);
? ? ? ? document.addEventListener('drop',function(event){
? ? ? ? ? ? event.preventDefault();
? ? ? ? ? ? event.target.style.backgroundColor = 'white';
? ? ? ? ? ? console.log(2);
? ? ? ? },false)
這些事件的事件對象包含鼠標事件的事件對象的方法與屬性星澳。之外還存在一個dataTransfer屬性
讓元素可拖
在HTML中默認可拖的元素只有image，link及被選擇的文本旱易。要讓其他元素可拖禁偎，需要做下面這三件事：
1.給元素設置一個draggable屬性，并且將這個屬性的值設置為true
2.在這個元素上添加一個dragstart的事件監(jiān)聽
3.在dragstart的事件監(jiān)聽上通過event.DataTransfer.setData(type,value)設置拖拽數(shù)據(jù)阀坏。
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">? ? ? This text <strong>may</strong> be dragged.
? ? </div>
如果draggable屬性被禁止或者設置為false如暖，那么這個元素不能被拖拽。draggable屬性可以在任何屬性上設置忌堂。當一個元素設置為可拖盒至，在這個元素上點擊或拖動鼠標，這個元素里的文本或其他元素不會被選中士修。當用戶開始拖動妄迁，dragstart事件會被觸發(fā)，在dragstart事件中李命，你能夠通過setData()指定拖拽數(shù)據(jù)，通過setDragImage()指定圖片反饋箫老，以及通過設置effectAllowed屬性和dropEffect屬性指定拖拽效果封字。拖拽數(shù)據(jù)是必須指定的，但是圖片反饋是拖拽效果不是必須的
拖拽數(shù)據(jù)
拖拽數(shù)據(jù)包含兩部分信息，分別是數(shù)據(jù)的類型和數(shù)據(jù)的值阔籽，數(shù)據(jù)的類型是字符串流妻，數(shù)據(jù)的值也是字符串形式。 拖拽數(shù)據(jù)的類型有：text/plain,text/html,image/jpeg,text/uri-list等笆制，還能夠自定義類型绅这。
可以多次調用setData()方法設置多個拖拽數(shù)據(jù)。如下：
vardt = event.dataTransfer;
dt.setData("application/x-bookmark",bookmarkString);
dt.setData('text/uri-list','www.baidu.com');
dt.setData('text/plain','drag data');
application/x-bookmark是自定義類型在辆。
如果通過這個方法設置新的類型的數(shù)據(jù)证薇，那么這個新的拖拽數(shù)據(jù)會位于拖拽數(shù)據(jù)列表的尾部，如果設置以及存在的類型的數(shù)據(jù)匆篓，那么新的數(shù)據(jù)會覆蓋舊的數(shù)據(jù)浑度。
通過getData()能夠得到指定類型的拖拽數(shù)據(jù)
通過clearData()能夠清除指定類型的拖拽數(shù)據(jù)
圖片反饋
圖片反饋并不是必須設置的，默認它是從拖拽目標上生成的一個半透明圖片鸦概，并且這個圖片在拖拽期間會跟著鼠標移動箩张。你能夠通過setDragImage(image,xOffect,yOffect)方法自定義圖片反饋。
setDragImage()接受三個參數(shù)窗市，第一個參數(shù)表示圖片引用先慷，第二個和第三個表示圖片左上角相對于鼠標指針的位置。單位是像素
? ? ? ? test target? ? ? ? ? ? #drag{
? ? ? ? ? ? width:200px;
? ? ? ? ? ? height:200px;
? ? ? ? ? ? background-color: aqua;
? ? ? ? }
? ? ? ? .drop{
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: antiquewhite;
? ? ? ? }
? ? ? ?
? ? ? ? document.addEventListener('dragstart',function(event){
? ? ? ? ? ? event.target.style.backgroundColor = 'red';
? ? ? ? ? ? event.dataTransfer.setDragImage(document.getElementById('img'),30,30);
? ? ? ? },false);
拖拽效果
通過設置effectAllowed和dropEffect可以指定拖拽效果
事件對象的dataTransfer屬性
dataTransfer屬性是一個DataTransfer對象咨察，在這個屬性中保存了拖拽操作過程中的數(shù)據(jù)论熙，它可能保存一個或者多個數(shù)據(jù)項。這個屬性是只讀的扎拣。
dataTransfer屬性中的標準屬性
1.dropEffect
得到當前drag and drop操作的類型赴肚，或者設置給當前drag and drop 設置新的類型。這個屬性可能取值是none二蓝，copy誉券，move，link刊愚。這屬性會影響拖拽過程中的鼠標的顯示形式踊跟。
2.effectAllowed
這個屬性用于指定運行的拖拽操作效果，可選的值有none鸥诽，all商玫，copy，move牡借，link拳昌，copyLink，copyMove钠龙，linkMove炬藤。默認情況這個值是all御铃，如果要設置這個屬性的值就要在dragstart的事件處理程序里進行設置。
3.files
包含了在data transfer中的所有可用的本地文件列表沈矿，如果被拖拽操作沒有涉及文件上真，那么它是一個空列表。
4.items
是一個包含了所有拖拽數(shù)據(jù)的列表羹膳。它是一個DataTransferItemList對象睡互。
5.types
它是一個字符串數(shù)組，這個數(shù)組中包含在dragstart事件處理程序中設置的拖拽事件的類型陵像，如果拖拽操作不存在數(shù)據(jù)就珠，那么他得到一個空數(shù)組。
DataTransfer屬性的標準方法
1.clearData(type):移除給定類型相關的拖拽數(shù)據(jù)蠢壹。接受一個可選的參數(shù)嗓违，如果這個參數(shù)是空或者沒有指定，那么移除所以類型的數(shù)據(jù)图贸，如果指定的類型不存在或者data transfer中不包含數(shù)據(jù)蹂季，那么這個方法不會產生什么影響。
2.getData(type):得到指定類型的拖拽數(shù)據(jù)疏日。如果指定類型的數(shù)據(jù)不存在或者data transfer中不包含數(shù)據(jù)偿洁， 得到一個空的字符串。
3.setData(type沟优，value):設置給定類型的拖拽數(shù)據(jù)涕滋。接受兩個參數(shù)，第一個參數(shù)是類型挠阁，第二個參數(shù)是指定類型的值宾肺。 如果這個類型的值不存在，那么在類型列表的最后添加一個新的格式侵俗，如果已經存在的,那么在相同的位置 存在的數(shù)據(jù)被替換.
4.setDragImage(image锨用，xoffset，yoffset):接受三個參數(shù)隘谣，第一個參數(shù)是圖片的引用增拥，第二個和第三個參數(shù)是移動的圖片的 左上角相對鼠標的位置。
DataTransferItemList對象
通過dataTransfer.items得到的值就是DataTransferList對象寻歧。
DataTransferItemList對象的屬性
1.length:得到拖拽數(shù)據(jù)的數(shù)量
DataTransferItemList對象的方法
1.add()：向拖拽數(shù)據(jù)列表中添加一個新的拖拽數(shù)據(jù)掌栅，添加成功后返回這個新的拖拽數(shù)據(jù)。當添加一個文件到拖拽數(shù)據(jù)列表中码泛，這個方法只接受一個文件對象作為參數(shù)猾封。當添加一個給定 類型的字符串到拖拽數(shù)據(jù)列表中，這個方法接受兩個參數(shù)噪珊，第一個參數(shù)是數(shù)據(jù)忘衍，第二個參數(shù)是類型逾苫。
2.remove(index):從拖拽數(shù)據(jù)列表中移除指定位置的拖拽數(shù)據(jù)。這個方法接受一個表示位置的參數(shù)枚钓，如果這個參數(shù)小于0或者大于拖拽數(shù)據(jù)列表的長度，拖拽數(shù)據(jù)列表不會發(fā)生改變瑟押。
3.clear():移除拖拽數(shù)據(jù)列表中所有的拖拽數(shù)據(jù)搀捷。不需要參數(shù)。
4.DataTransferItem(index):得到指定位置上的拖拽數(shù)據(jù)多望。接受一個表示位置的參數(shù)嫩舟， 這個方法簡寫形式是數(shù)組索引。
DataTransferItem對象
dataTransfer.items中的每一項都是DataTransferItem對象怀偷。
DataTransferItem對象的屬性
1.kind：得到拖拽數(shù)據(jù)的鍵家厌，可能的值有file和string
2.type：得到拖拽數(shù)據(jù)的類型，是MINE type
DataTransferItem對象的方法
1.getAsFile():返回拖拽數(shù)據(jù)的文件對象椎工。如果拖拽數(shù)據(jù)不是文件則返回null
2.getAsString(function):調用回調函數(shù)饭于，這個回調函數(shù)將拖拽數(shù)據(jù)項的字符串形式作為它的參數(shù)
拖拽文件
要使文件能夠被拖放的一個重要步驟是定義一個放置區(qū)域。并且為放置區(qū)域添加drop维蒙，dragover和dragend事件處理程序掰吕。
當為一個元素添加drop事件的處理程序，及在dragover事件處理程序中取消瀏覽器的默認行為颅痊，那么這個元素就是放置區(qū)域殖熟。
另外，在drag和drop操作結束之后斑响，應用程序應該移除拖拽數(shù)據(jù)（可能是一個或者多個文件）菱属，數(shù)據(jù)的清理通常在 dragend事件處理程序中。
<div id="drop_zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend = "dragend_handler(event)"><strong><Drag one or more files to this Drop Zone ...</strong></div>
例子一舰罚，訪問文件名
function drop_handler(ev) {
? console.log("Drop");
? ev.preventDefault();
? // If dropped items aren't files, reject themvardt = ev.dataTransfer;
? if (dt.items) {
? ? // Use DataTransferItemList interface to access the file(s)for(vari=0; i < dt.items.length; i++) {
? ? ? if(dt.items[i].kind == "file") {
? ? ? ? varf = dt.items[i].getAsFile();
? ? ? ? console.log("... file[" + i + "].name = " + f.name);
? ? ? }
? ? }
? } else {
? ? // Use DataTransfer interface to access the file(s)for(vari=0; i < dt.files.length; i++) {
? ? ? console.log("... file[" + i + "].name = " + dt.files[i].name);
? ? }
? }
}
例子二纽门，阻止瀏覽器默認行為
function dragover_handler(ev) {
? console.log("dragOver");
? // Prevent default select and drag behavior? ev.preventDefault();
}
?例子三，清除數(shù)據(jù)
function dragend_handler(ev) {
? console.log("dragEnd");
? // Remove all of the drag datavardt = ev.dataTransfer;
? if (dt.items) {
? ? // Use DataTransferItemList interface to remove the drag datafor(vari = 0; i < dt.items.length; i++) {
? ? ? dt.items.remove(i);
? ? }
? } else {
? ? // Use DataTransfer interface to remove the drag data? ? ev.dataTransfer.clearData();
? }
}
