HTML5 DragEvent

来源:http://www.cnblogs.com/QxQstar/archive/2017/02/25/6442761.html
-Advertisement-
Play Games

DragEvent是一個表示drag和drop交互的DOM event介面。用戶通過將指針設備（如：滑鼠）放在目標的錶面開始拖動，然後拖動指針到一個新的位置（如其他DOM元素）。應用程式自動的解析拖放交互。DragEvent介面從mouseEvent和Event那兒繼承屬性。 Event types ...


DragEvent是一個表示drag和drop交互的DOM event介面。用戶通過將指針設備（如：滑鼠）放在目標的錶面開始拖動，然後拖動指針到一個新的位置（如其他DOM元素）。應用程式自動的解析拖放交互。DragEvent介面從mouseEvent和Event那兒繼承屬性。

Event types

DragEvent並不是一個單一的事件，它包含了多個事件，這些事件分別是：drag，dragstart，dragenter，dragend，dragover，dragexit，dragleave，drop。

drag：這個事件在元素拖拽的過程中反覆觸發，每一百毫秒觸發一次。這事件的目標元素是被拖的那個元素，該事件可冒泡，可取消預設行為。

dragstart：這個事件在用戶開始拖動時觸發。這個事件的目標元素是被拖的那個元素，在這些事件中，dragstart事件最先觸發。該事件可冒泡，可取消預設行為。

dragenter：這個事件在被拖的元素進入一個合法的可drop目標時觸發。這個事件的目標元素是這個可drop目標。該事件可冒泡，可取消預設行為。

dragover：當被拖的元素在可drop目標範圍內移動時反覆觸發這個事件，一百毫秒觸發一次。這個事件的目標元素是這個可drop目標。該事件可冒泡，可取消預設行為。

dragend：當拖拽結束時觸發這個事件，這個事件的目標元素是被拖的元素。在這些事件中dragend最後觸發。該事件可冒泡，不能取消預設行為。

dragleave：這個事件在被拖得元素離開合法的可drop目標時觸發。這個事件的目標元素是這個可drop目標。該事件可冒泡，不能取消預設行為。

dragexit：當一個可drop元素不再是拖拽操作最近的drop目標時觸發這個事件。這個事件的目標元素是這個可drop元素。該事件可冒泡，不嫩取消預設行為。

drop：當在可drop目標上鬆開拖動元素的指針設備時觸發這個事件，該事件的目標元素是這個可drop目標。drop事件在dragend事件觸發之前觸發。這個事件可冒泡，可取消預設行為。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test target</title>
    <style type="text/css">
        #drag{
            width:200px;
            height:200px;
            background-color: aqua;
        }
        .drop{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
        我可以拖動
    </div>
    <img src="test.jpg" id="img">
    <div class="drop"></div>
    <script type="text/javascript">
        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)
    </script>
</body>
</html>

這些事件的事件對象包含滑鼠事件的事件對象的方法與屬性。之外還存在一個dataTransfer屬性

讓元素可拖

在HTML中預設可拖的元素只有image，link及被選擇的文本。要讓其他元素可拖，需要做下麵這三件事：

1.給元素設置一個draggable屬性，並且將這個屬性的值設置為true

2.在這個元素上添加一個dragstart的事件監聽

3.在dragstart的事件監聽上通過event.DataTransfer.setData(type,value)設置拖拽數據。

<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事件會被觸發，在dragstart事件中，你能夠通過setData()指定拖拽數據，通過setDragImage()指定圖片反饋，以及通過設置effectAllowed屬性和dropEffect屬性指定拖拽效果。拖拽數據是必須指定的，但是圖片反饋是拖拽效果不是必須的

拖拽數據

拖拽數據包含兩部分信息，分別是數據的類型和數據的值，數據的類型是字元串，數據的值也是字元串形式。 拖拽數據的類型有：text/plain,text/html,image/jpeg,text/uri-list等，還能夠自定義類型。

可以多次調用setData()方法設置多個拖拽數據。如下：

var dt = 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是自定義類型。

如果通過這個方法設置新的類型的數據，那麼這個新的拖拽數據會位於拖拽數據列表的尾部，如果設置以及存在的類型的數據，那麼新的數據會覆蓋舊的數據。

通過getData()能夠得到指定類型的拖拽數據

通過clearData()能夠清除指定類型的拖拽數據

圖片反饋

圖片反饋並不是必須設置的，預設它是從拖拽目標上生成的一個半透明圖片，並且這個圖片在拖拽期間會跟著滑鼠移動。你能夠通過setDragImage(image,xOffect,yOffect)方法自定義圖片反饋。

setDragImage()接受三個參數，第一個參數表示圖片引用，第二個和第三個表示圖片左上角相對於滑鼠指針的位置。單位是像素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test target</title>
    <style type="text/css">
        #drag{
            width:200px;
            height:200px;
            background-color: aqua;
        }
        .drop{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
        我可以拖動
    </div>
    <img src="test.jpg" id="img">
    <div class="drop"></div>
    <script type="text/javascript">
      
        document.addEventListener('dragstart',function(event){
            event.target.style.backgroundColor = 'red';
            event.dataTransfer.setDragImage(document.getElementById('img'),30,30);

        },false);
       
    </script>
</body>
</html>

拖拽效果

通過設置effectAllowed和dropEffect可以指定拖拽效果

事件對象的dataTransfer屬性

dataTransfer屬性是一個DataTransfer對象，在這個屬性中保存了拖拽操作過程中的數據，它可能保存一個或者多個數據項。這個屬性是只讀的。

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

是一個包含了所有拖拽數據的列表。它是一個DataTransferItemList對象。

5.types

它是一個字元串數組，這個數組中包含在dragstart事件處理程式中設置的拖拽事件的類型，如果拖拽操作不存在數據，那麼他得到一個空數組。

DataTransfer屬性的標準方法

1.clearData(type):移除給定類型相關的拖拽數據。接受一個可選的參數，如果這個參數是空或者沒有指定，那麼移除所以類型的數據，如果指定的類型不存在或者data transfer中不包含數據，那麼這個方法不會產生什麼影響。

2.getData(type):得到指定類型的拖拽數據。如果指定類型的數據不存在或者data transfer中不包含數據， 得到一個空的字元串。

3.setData(type，value):設置給定類型的拖拽數據。接受兩個參數，第一個參數是類型，第二個參數是指定類型的值。 如果這個類型的值不存在，那麼在類型列表的最後添加一個新的格式，如果已經存在的,那麼在相同的位置 存在的數據被替換.

4.setDragImage(image，xoffset，yoffset):接受三個參數，第一個參數是圖片的引用，第二個和第三個參數是移動的圖片的 左上角相對滑鼠的位置。

DataTransferItemList對象

通過dataTransfer.items得到的值就是DataTransferList對象。

DataTransferItemList對象的屬性

1.length:得到拖拽數據的數量

DataTransferItemList對象的方法

1.add()：向拖拽數據列表中添加一個新的拖拽數據，添加成功後返回這個新的拖拽數據。當添加一個文件到拖拽數據列表中，這個方法只接受一個文件對象作為參數。當添加一個給定 類型的字元串到拖拽數據列表中，這個方法接受兩個參數，第一個參數是數據，第二個參數是類型。

2.remove(index):從拖拽數據列表中移除指定位置的拖拽數據。這個方法接受一個表示位置的參數，如果這個參數小於0或者大於拖拽數據列表的長度，拖拽數據列表不會發生改變。

3.clear():移除拖拽數據列表中所有的拖拽數據。不需要參數。

4.DataTransferItem(index):得到指定位置上的拖拽數據。接受一個表示位置的參數， 這個方法簡寫形式是數組索引。

DataTransferItem對象

dataTransfer.items中的每一項都是DataTransferItem對象。

DataTransferItem對象的屬性

1.kind：得到拖拽數據的鍵，可能的值有file和string

2.type：得到拖拽數據的類型，是MINE type

DataTransferItem對象的方法

1.getAsFile():返回拖拽數據的文件對象。如果拖拽數據不是文件則返回null

2.getAsString(function):調用回調函數，這個回調函數將拖拽數據項的字元串形式作為它的參數

拖拽文件

要使文件能夠被拖放的一個重要步驟是定義一個放置區域。並且為放置區域添加drop，dragover和dragend事件處理程式。

當為一個元素添加drop事件的處理程式，及在dragover事件處理程式中取消瀏覽器的預設行為，那麼這個元素就是放置區域。

另外，在drag和drop操作結束之後，應用程式應該移除拖拽數據（可能是一個或者多個文件），數據的清理通常在 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 them
  var dt = ev.dataTransfer;
  if (dt.items) {
    // Use DataTransferItemList interface to access the file(s)
    for (var i=0; i < dt.items.length; i++) {
      if (dt.items[i].kind == "file") {
        var f = dt.items[i].getAsFile();
        console.log("... file[" + i + "].name = " + f.name);
      }
    }
  } else {
    // Use DataTransfer interface to access the file(s)
    for (var i=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();
}

 例子三，清除數據

function dragend_handler(ev) {
  console.log("dragEnd");
  // Remove all of the drag data
  var dt = ev.dataTransfer;
  if (dt.items) {
    // Use DataTransferItemList interface to remove the drag data
    for (var i = 0; i < dt.items.length; i++) {
      dt.items.remove(i);
    }
  } else {
    // Use DataTransfer interface to remove the drag data
    ev.dataTransfer.clearData();
  }
}

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Keepalived安裝與配置
    下載並解壓Keepalived安裝包到兩台nginx所在的伺服器 192.168.200.1 192.168.200.2 執行編譯安裝（安裝目錄設置為 /usr/local/keepalived ） ./configure --prefix=/usr/local/keepalived && make ...
  • 學習盒模型的整理轉述
    前言：這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！ 1. css盒模型有標準盒模型和IE盒模型，結構是：content、padding、border、margin。 css3有個box-sizing屬性，設置用哪種盒模型； box-sizing:conten ...
  • 【基礎知識】之 typeof
    概述 typeof操作符返回一個字元串,指示未經計算的操作數的類型。 語法 常規用法 null 問題 // 在 JavaScript 最初的實現中，JavaScript 中的值是由一個表示類型的標簽和實際數據值表示的。對象的類型標簽是0。由於 null 代表的是空指針(大多數平臺下值為0x00)，因 ...
  • 【前端】:jQuery上
    前言: 今天寫一篇jQuery，發現內容太多了，那就分成兩篇寫吧……寫完jQuery基礎知識後會再寫一些jQuery實例~~ jQuery下載。jQuery是一個相容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)，對javascript進行了封 ...
  • Javascript學習一
    JavaScript-警告（alert 消息對話框） 註意: 1. 在點擊對話框"確定"按鈕前，不能進行任何其它操作。 2. 消息對話框通常可以用於調試程式。 3. alert輸出內容，可以是字元串或變數，與document.write 相似。 // JavaScript-確認（confirm 消息 ...
  • JavaScript定時器及相關面試題
    在 "單線程JavaScript" 這篇文章中,在介紹JavaScript單線程的同時，也介紹了setTimeout是如何工作的。但是對於定時器的一些內容，並沒有做深入的討論。這篇文章，會詳細說說JS的兩種定時器，setTimeout和setInterval，以及它們的工作方式。同時，會談談有關se ...
  • jQuery：deferred [轉]
    jQuery的開發速度很快，幾乎每半年一個大版本，每兩個月一個小版本。 每個版本都會引入一些新功能。今天我想介紹的，就是從jQuery 1.5.0版本開始引入的一個新功能 deferred對象。 這個功能很重要，未來將成為jQuery的核心方法，它徹底改變瞭如何在jQuery中使用ajax。為了實現 ...
  • 關於左邊固定，右邊自適應佈局的響應式佈局寫法
    關於響應式佈局現才接觸到，雖然代碼很簡單，但是對基礎要求還是有一些。 1.left設置position:absolute和width：70px；那麼右邊用margin-left：70px；因為是響應式的我用jquery設置了一下高度（不用jquery，直接設置高度為100%好像不行，不知道為什麼有知 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類