首頁技術(shù)文章正文

HTML5中如何實現(xiàn)拖曳交互效果?

更新時間:2023-03-23 來源:黑馬程序員 瀏覽量:

拖曳是頁面中的元素從初始位置被拖動到新的位置的用戶行為,如拖曳頁面中的指定元素到另一個元素中。首先使用鼠標(biāo)指針進入源對象,然后按住鼠標(biāo)左鍵拖動源對象,當(dāng)移動鼠標(biāo)時源對象會跟隨鼠標(biāo)指針移動,如果源對象進入了目標(biāo)對象,就松開鼠標(biāo)左鍵讓源對象放置在目標(biāo)對象中。

在拖曳操作中,源對象表示被拖動的元素。為元素添加draggable屬性可以設(shè)置此元素為源對象,示例代碼如下:

<p draggable?"true"></p>

上述代碼設(shè)置<p>標(biāo)簽的draggable屬性的值為true,表示<p>標(biāo)簽是一個可以被鼠標(biāo)拖曳的源對象。需要注意的是,圖片和鏈接默認(rèn)是可以拖動的,它們不用添加draggable屬性,就可以進行拖曳。

源對象進入的元素稱為目標(biāo)對象,目標(biāo)對象可以是頁面中的任一元素,示例代碼如下:

<div></div>

<div>標(biāo)簽不需要設(shè)置draggable屬性。 

拖曳事件包括拖曳開始、拖曳進行中、拖曳結(jié)束等事件。在開發(fā)中,用戶可以依靠拖曳事件來實現(xiàn)帶有拖曳交互效果的頁面。拖曳事件是由元素對象產(chǎn)生的,如源對象、目標(biāo)對象,這些對象會產(chǎn)生不同的拖曳事件。源對象事件如表所示。
1679560472204_83.png
目標(biāo)對象事件表如下:
1679560651155_77.png

需要注意的是,只有當(dāng)源對象上的鼠標(biāo)指針進入目標(biāo)對象時,才會觸發(fā)ondragenter事件。默認(rèn)情況下,瀏覽器會默認(rèn)阻止ondrop事件。如果想要觸發(fā)該事件,則需要在ondragover事件中使用“retum false;”(或者e.preventDefaultO)來阻止其默認(rèn)行為。

在源對象和目標(biāo)對象的事件處理函數(shù)中,使用dataTransfer對象可以進行數(shù)據(jù)傳輸,示例代碼如下:

// 通過 dataTransfer對象設(shè)置數(shù)據(jù)
event.dataTransfer.setData(format, data);
// 通過dataTransfer對象獲取數(shù)據(jù)
event.dataTransfer.getData(format);

上述代碼中,event表示事件處理函數(shù)的事件源對象,setData(format,data)方法用于將指定格式的數(shù)據(jù)設(shè)置給dataTransfer對象,參數(shù)format用于定義數(shù)據(jù)的格式,data表示待設(shè)置的數(shù)據(jù):getData(format)方法可以從dataTransfer對象中獲取指定格式的數(shù)據(jù),format 表示數(shù)據(jù)的格式。

下面演示HTML5中拖曳事件的具體使用方法。

(1)創(chuàng)建C:codelchapter02demo09.html,定義源對象p和目標(biāo)對象div頁面結(jié)構(gòu),具體代碼如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    div {
      width:200px;
      height:200px;
      border: lpx solid red;
      float: left;
      malin: 10px;
    }
    div:nth-child(2) {
      border: lpx solid green;
    }
    div:nth-child(3) {
      border: lpx solid blue;
    }
    p{
     height: 25px;
     background-color: pink;
     1ine-height: 25px;
     text-align: center;
    }
  </style>
</head>
<body>
  <div id="divl">
    <p id="p1"draggable="true">施曳內(nèi)容1</p>
    <p id="p2"draggable="true">施曳內(nèi)容2</p>
    <p id="p3"draggable="true">拖曳內(nèi)容3</p>
    <p id="p4"draggable="true">拖曳內(nèi)客4</p>
  </div>
  <div id="div2"></div>
  <div id="div3"></div>
</body>
</html>

上述代碼中,第33~40行代碼定義了3個div盒子作為目標(biāo)對象,元素id值分別是divl、div2和div3。在div1盒子中,放置了4個p元素作為源對象,這些元素的id值分別為p1、p2、p3和p4。

(2)保存代碼,在瀏覽器中進行測試,效果如圖。

1679561619261_84.png

(3)在第(1)步第40行代碼后,編寫如下代碼,設(shè)置源對象的拖曳效果:

<script>
  // 當(dāng)拖曳開始時觸發(fā)
  document.ondragstart=function (event){
    console.log('源對象開始被拖動');
    console.log (event.target.id);
    event.dataTransfer.setData('text/html',event.target.id);//傳遞id值};
  //作用于整個拖曳過程(不斷地執(zhí)行)
  document.ondrag=function(event){
    console.log('源對象被拖動過程中');
  };
  //當(dāng)拖曳結(jié)束時觸發(fā)
  document.ondragend=function (event){
    console.log('源對象被拖動結(jié)束');
  };
</script>

上述代碼中,event.target用來獲取觸發(fā)事件的子盒子。由于源對象是可以在目標(biāo)對象中任意來回拖動的,所以使用document作為父盒子,在這里將事件對象委托給document元素。第3-7行代碼用于實現(xiàn)源對象被拖動時的數(shù)據(jù)存儲。其中,第6行代碼在拖曳操作時使用dataTransfer對象存儲數(shù)據(jù),該對象可以保存一項或多項數(shù)據(jù),支持多種數(shù)據(jù)型(如URL、text/html類型)。dataTransfer對象的setDataO方法可以為一個給定的類型設(shè)置數(shù)據(jù),傳遞 event.target.id 用于記錄當(dāng)前被拖曳的源對象的id。

(4)在瀏覽器中刷新瀏覽器頁面,并打開控制臺,查看源對象的事件過程,頁面效果如圖。

1679562169129_78.png

當(dāng)拖動id為p4的元素“拖曳內(nèi)容4”時,控制臺中會打印出該元素的id值,以及源對象開始被拖動、被拖動過程中和被拖動結(jié)束時的一系列監(jiān)聽。讀者可以根據(jù)控制臺打印的數(shù)據(jù)來觀察監(jiān)聽過程。

(5)繼續(xù)編寫如下代碼,設(shè)置目標(biāo)對象的釋放效果:

//當(dāng)源對象進入目標(biāo)對象時
document.ondragenter=function (event){
  console.log('目標(biāo)對象被源對象拖動著進入');
  console.log (event.target);
};
//當(dāng)源對象懸停在目標(biāo)對象上方時觸發(fā)
document.ondragover=function (event) {
  console.1og('源對象懸停在目標(biāo)對象上方'):
  return false;
};
// 當(dāng)源對象離開目標(biāo)對象時
docuwlnt.ondragleave=function() {
console.log('離開了');
};
//當(dāng)源對象在目標(biāo)對象上方釋放鼠標(biāo)時
document.ondrop=function (event){
  console.1og('上方釋放/松手');
  var id = event.dataTransfer.getData('text/html');
  event.target.appendChild(document.getElementById(id));
};

上述代碼定義了應(yīng)用于目標(biāo)對象的一系列監(jiān)聽事件。第16~20行代碼實現(xiàn)了當(dāng)源對象在目標(biāo)對象上釋放(松開)鼠標(biāo)時,將源對象放入目標(biāo)對象的效果。其中,第18行代碼使用dataTransfer對象的getData()方法,獲取之前使用 setDataO方法存入的id值;第19行代碼使用document.getElementByld)獲取id值對應(yīng)的元素,并使用appendChild()方法將其追加到event.target 目標(biāo)對象中。

(6)在瀏覽器中刷新,然后進行拖曳操作,查看源對象進入目標(biāo)對象的事件過程,頁面效果如圖。

拖曳

分享到:
在線咨詢 我要報名
和我們在線交談!