Html5原生拖拽是什么和使用方法

發(fā)布時(shí)間：2021-03-16 17:24:15 來源：億速云閱讀：199 作者：TREX 欄目：web開發(fā)

這篇文章主要介紹“Html5原生拖拽是什么和使用方法”，在日常操作中，相信很多人在Html5原生拖拽是什么和使用方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”Html5原生拖拽是什么和使用方法”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

拖拽實(shí)現(xiàn)

Html5原生拖拽是什么和使用方法

主要用到的是H5自帶的拖拽效果。其實(shí)項(xiàng)目前端部分是使用React編寫的，也是在使用H5實(shí)現(xiàn)了之后才了解到Dan Abramov大佬有個(gè)React-DnD組件對(duì)原生拖拽方法進(jìn)行了封裝。稍微學(xué)習(xí)了一下，很強(qiáng)。后續(xù)有使用到再寫篇文章進(jìn)行分享。

相關(guān)事件定義與用法

涉及一個(gè)屬性六個(gè)事件。事件均為H5原生事件。

屬性

draggable：正常div是不允許進(jìn)行拖動(dòng)的。需要添加屬性draggable="true"將元素設(shè)置為可拖動(dòng)。

事件

ondragstart：拖拽元素事件。在被拖拽時(shí)被調(diào)用。
ondrag：拖拽元素事件。在元素正在被拖拽時(shí)調(diào)用。
ondragend：拖拽元素事件。在拖拽元素放置時(shí)調(diào)用。
ondragenter：放置元素事件。在拖拽元素進(jìn)入到放置元素有效區(qū)域時(shí)調(diào)用。
ondragover：放置元素事件。在拖拽元素覆蓋放置元素有效區(qū)域時(shí)調(diào)用
ondragleave：放置元素事件。在拖拽元素離開放置元素有效區(qū)域時(shí)調(diào)用。
ondrop：放置元素事件。在拖拽元素被放置在放置元素中調(diào)用。

基礎(chǔ)代碼實(shí)現(xiàn)

拖拽元素相關(guān)事件實(shí)現(xiàn)代碼如下。

function handleOndragstart() {
    /*
    該事件為拖拽元素被拖拽時(shí)調(diào)用。一般用于獲取該拖拽元素的唯一標(biāo)識(shí)，如id等。以方便后續(xù)數(shù)據(jù)更新時(shí)進(jìn)行元素定位
     */
}

function handleOndragend() {
    /*
    該事件在拖拽元素被放置時(shí)調(diào)用。一般用于重置變量操作
     */
}

function handleOndrag() {
    /*
    該事件憑個(gè)人需求進(jìn)行功能實(shí)現(xiàn)
     */
}

拖拽元素H5代碼如下

<div 
     draggable="true" 
     ondragstart="handleOndragstart()" 
     ondrag="handleOndarg()" 
     ondragend="handleOndragend()"
     >
    該元素為拖拽元素
</div>

放置元素相關(guān)事件實(shí)現(xiàn)代碼如下

/*
默認(rèn)情況下，數(shù)據(jù)/元素不能放置到其他元素中。 如果要實(shí)現(xiàn)該功能，我們需要防止元素的默認(rèn)處理方法。我們可以通過調(diào)用 event.preventDefault() 方法來實(shí)現(xiàn) ondragover 事件。
 */
function handleOndragover(event) {
    event.preventDefault();
    /*
    在這里進(jìn)行你的函數(shù)處理
     */
}

function handleOndragenter(event) {
    event.preventDefault();
    /*
    在這里進(jìn)行你的函數(shù)處理
     */
}

function handleOndragleave(event) {
    event.preventDefault();
    /*
    在這里進(jìn)行你的函數(shù)處理
     */
}

function handleOndrop(event) {
    event.preventDefault();  // 清除默認(rèn)事件。drop 事件的默認(rèn)行為是以鏈接形式打開
    /*
    一般在該事件中，也就是拖拽元素被放下的時(shí)候與后端進(jìn)行交互進(jìn)行數(shù)據(jù)更新
     */
}

放置元素H5代碼如下

<div 
     ondragenter="handleOndragenter(event)" 
     ondragover="handleOndragover(event)" 
     ondragleave="handleOndragleave(event)" 
     ondrop=“handleOndrop(event)
     >
    該元素為放置元素
</div>

實(shí)例

以下代碼可實(shí)現(xiàn)在兩個(gè)div之間進(jìn)行子元素的拖拽

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>拖拽實(shí)現(xiàn)</title>
    <style type="text/css">
      .parent {
        display: flex;
        width: 450px;
        justify-content: space-around;
      }
      .container {
        height: 300px;
        width: 200px;
        background-color: rgba(255, 255, 0, 0.3);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .box {
        width: 100px;
        height: 50px;
        background-color: rgba(255, 255, 255, 1);
      }
    </style>
    <script type="text/javascript">
      function handleOndragstart(event) {
        // 設(shè)置被拖動(dòng)的數(shù)據(jù)，可簡單理解為設(shè)置Box的值為被拖動(dòng)元素的id。此處為"Box"
        event.dataTransfer.setData("Box", event.target.id);
      }
      function handleOndragover(event) {
        event.preventDefault();
      }
      function handleOndrop(event) {
          // 拖拽元素被放下時(shí)調(diào)用
        event.preventDefault();
        var data = event.dataTransfer.getData("Box");
        // 將拖拽元素追加到改放置元素中
        event.target.appendChild(document.getElementById(data));
      }
    </script>
  </head>

  <body>
    <div class="parent">
      <div
        class="container"
        ondragover="handleOndragover(event)"
        ondrop="handleOndrop(event)"
      >
        <div
          class="box"
          draggable="true"
          id="Box"
          ondragstart="handleOndragstart(event)"
        ></div>
      </div>
      <div
        class="container"
        ondragover="handleOndragover(event)"
        ondrop="handleOndrop(event)"
      ></div>
    </div>
  </body>
</html>

最后

暫時(shí)寫這么多吧。以上的實(shí)例也是用H5寫的，并沒有使用React實(shí)現(xiàn)。以后再試著寫個(gè)React版的簡單demo吧。這應(yīng)該也算是我的第一篇分享文章，希望能堅(jiān)持下去。

到此，關(guān)于“Html5原生拖拽是什么和使用方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

向AI問一下細(xì)節(jié)

Html5原生拖拽是什么和使用方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽