淺析原生JavaScript中拖拽屬性draggable的使用

更新時間：2024年03月07日 11:16:19 作者：ZL不懂前端

這篇文章主要為大家詳細(xì)介紹了原生JavaScript中拖拽屬性draggable使用的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

定義和用法

draggable 屬性規(guī)定元素是否可拖動。

提示： 鏈接和圖像默認(rèn)是可拖動的。

提示： draggable 屬性經(jīng)常用于拖放操作。

draggable 屬性是 HTML5 新增的。

語法

<element draggable="true|false|auto">

屬性值

值	描述
true	規(guī)定元素是可拖動的。
false	規(guī)定元素是不可拖動的。
auto	使用瀏覽器的默認(rèn)特性。

draggable屬性的使用

draggable既然是拖放，那么主要是兩個角色比較重要：

（1）被拖動的元素A

（2）A被拖動以后放置的元素B

舉例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one{
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .two{
      width: 200px;
      height: 200px;
      background-color: springgreen;
    }
  </style>
</head>
<body>
  <div class="one" draggable="true">11</div>
  <div class="two">22</div>
  <script>
  </script>
</body>
</html>

效果

現(xiàn)在有兩個點(diǎn)：

（1）拖動的元素要賦予draggable屬性，屬性值為true。

（2）被拖進(jìn)的元素要在dragover和dragenter事件值中阻止默認(rèn)行為。

<div class="one" draggable="true">11</div>
<div class="two" ondragover="handleOndragover(event)" ondragenter="handleOndragenter(event)">22</div>
<script>
  function handleOndragover(e){
    e.preventDefault();
  }
  function handleOndragenter(e){
    e.preventDefault();
  }
</script>

此時A元素可以拖入到B元素里面，但是只是視覺效果上的，一旦松開鼠標(biāo)，就恢復(fù)原狀了

draggable屬性的API

針對被拖拽元素A

（1）dragstart方法

該方法在按下鼠標(biāo)并且移動鼠標(biāo)時，會在A上觸發(fā)該方法。同時鼠標(biāo)的光標(biāo)會變成禁用的樣子，直到拖動到允許放置A的元素上，禁用的效果就會消失。

而允許放置A的元素，就是剛剛說的在dragover和dragenter中阻止默認(rèn)行為

舉例：當(dāng)拖動A時，改變A元素的背景顏色為藍(lán)色

<div class="one" draggable="true" ondragstart="handleOndragstart(event)">11</div>
<div class="two" ondragover="handleOndragover(event)" ondragenter="handleOndragenter(event)">22</div>
<script>
  function handleOndragstart(e){
    e.target.style.backgroundColor='blue';
  }
  function handleOndragover(e){
    e.preventDefault();
  }
  function handleOndragenter(e){
    e.preventDefault();
  }
</script>

（2）drag方法

該方法發(fā)生在dragstart之后，只要是在拖動過程之中，該方法就會持續(xù)觸發(fā)

<div class="one" draggable="true" ondragstart="handleOndragstart(event)" ondrag="handleOndrag(event)">11</div>
<div class="two" ondragover="handleOndragover(event)" ondragenter="handleOndragenter(event)">22</div>
<script>
  function handleOndragstart(e){
    console.log('ondragstart');
  }
  function handleOndrag(e){
    console.log('ondrag');
  }
  function handleOndragover(e){
    e.preventDefault();
  }
  function handleOndragenter(e){
    e.preventDefault();
  }
</script>

（3）dragend方法

該方法是在拖動結(jié)束的時候觸發(fā)，也就是當(dāng)你拖拽后，松開鼠標(biāo)的一瞬間觸發(fā)

<div class="one" draggable="true" ondragstart="handleOndragstart(event)" ondrag="handleOndrag(event)" ondragend="handleOndragend(event)">11</div>
<div class="two" ondragover="handleOndragover(event)" ondragenter="handleOndragenter(event)">22</div>
<script>
  function handleOndragstart(e){
    console.log('ondragstart');
  }
  function handleOndrag(e){
    console.log('ondrag');
  }

  function handleOndragend(e){
    console.log('ondragend');
  }

  function handleOndragover(e){
    e.preventDefault();
  }
  function handleOndragenter(e){
    e.preventDefault();
  }
</script>

一般我們比較常用的方法就是dragstrat方法，通過在這個方法中將被推拽的元素進(jìn)行保存下來，再進(jìn)行后續(xù)的操作。

拖入元素B的事件

針對于拖入元素的事件，它不需要元素具有draggable屬性，只要你想，任何元素使用這些方法都是可以的。但要記住上面所說的那兩個方法，阻止事件默認(rèn)行為。

（1）dragenter方法

該方法是指拖拽元素A，在拖入到B之中，B所觸發(fā)的事件。當(dāng)然，任何具有draggable屬性為true的元素，拖入到B中，都會觸發(fā)該事件。

<div class="one" draggable="true" ondragstart="handleOndragstart(event)" ondrag="handleOndrag(event)" ondragend="handleOndragend(event)">11</div>
<div class="two" ondragover="handleOndragover(event)" ondragenter="handleOndragenter(event)">22</div>
<script>
  function handleOndragstart(e){
    console.log('ondragstart');
  }
  function handleOndrag(e){
    console.log('ondrag');
  }

  function handleOndragend(e){
    console.log('ondragend');
  }

  function handleOndragover(e){
    e.preventDefault();
  }
  function handleOndragenter(e){
    console.log('ondragenter');
    e.preventDefault();
  }
</script>

切記，這里事件的觸發(fā)不需要松開鼠標(biāo)

舉例： 當(dāng)A拖入到B中，我們希望A是真正成為B的子元素：

<div class="one" draggable="true" ondragstart="handleOndragstart(event)" ondrag="handleOndrag(event)" ondragend="handleOndragend(event)">11</div>
<div class="two" ondragover="handleOndragover(event)" ondragenter="handleOndragenter(event)">22</div>
<script>
  function handleOndragstart(e) {
    console.log('ondragstart');
  }
  function handleOndrag(e) {
    console.log('ondrag');
  }

  function handleOndragend(e) {
    console.log('ondragend');
  }

  function handleOndragover(e) {
    e.preventDefault();
  }
  function handleOndragenter(e) {
    e.preventDefault();
    e.target.appendChild(document.querySelector('.one'))
  }
</script>

（2）dragover方法

該方法只要是，拖拽元素A在目標(biāo)元素B中移動，就會持續(xù)觸發(fā)。（就是如果A在B區(qū)域內(nèi)懸浮，就會觸發(fā)）

function handleOndragover(e) {
  e.preventDefault();
  console.log('ondragover');
}

（3）dragleave方法

該方法指的是拖拽元素A，在從目標(biāo)元素B中離開的時候，會觸發(fā)該方法

這里記住，一定是先進(jìn)入到B，再離開B的時候觸發(fā)該事件，也就是說要先觸發(fā)dragenter方法，才能觸發(fā)dragleave方法

function handleOndragleave(e){
  console.log('ondragleave');
}

（4）drop方法

該方法是指，拖拽元素A被放置了目標(biāo)元素B中的時候觸發(fā)，那它和dragenter方法的區(qū)別在于，該方法需要鼠標(biāo)松開才會觸發(fā)。而這個方法也是最常用的方法。

例：當(dāng)A拖入到B中，我們希望A是真正成為B的子元素：

function handleOndrop(e){
  console.log('ondrop');
  e.target.appendChild(document.querySelector('.one'))
}

總結(jié)

如果要實(shí)現(xiàn)拖放，需要具備以下條件

（1）拖動的元素要賦予draggable屬性，屬性值為true。

（2）最重要的三個事件：dragstart、dragover、drop

被托動元素A需要設(shè)置draggable屬性、dragstart事件
拖入元素B需要設(shè)置dragover、drop事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one {
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .two {
      width: 200px;
      height: 200px;
      background-color: springgreen;
    }
  </style>
</head>

<body>
  <div class="one" draggable="true" ondragstart="handleOndragstart(event)">11</div>
  <div class="two" ondragover="handleOndragover(event)" ondrop="handleOndrop(event)">22</div>
  <script>
    function handleOndragstart(e){
      console.log(e);
    }
    function handleOndragover(e){
      e.preventDefault();
    }
    function handleOndrop(e){
      e.target.appendChild(document.querySelector('.one'))
    }
  </script>
</body>

</html>

到此這篇關(guān)于淺析原生JavaScript中拖拽屬性draggable的使用的文章就介紹到這了,更多相關(guān)JavaScript拖拽屬性draggable內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: