溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

javascript html5輕松實現(xiàn)拖動功能

發(fā)布時間：2020-09-22 09:09:20 來源：腳本之家 閱讀：208 作者：勤勞的小葉醬 欄目：web開發(fā)

拖放（drag和drop）是html5標準組成，下面我們從五個方面對其進行敘述，分別是如何成為拖動物體，如何成為拖動目標，拖動物體上擁有的事件，拖動目標上擁有的事件以及拖放物體間如何傳遞信息。

拖動物體上擁有的事件

  • dragstart （在物體剛被拖動時觸發(fā)）
  • drag （在dragstart事件觸發(fā)之后就被觸發(fā)）
  • dragend （拖動事件結(jié)束時觸發(fā)）

拖動目標上擁有的事件

  • dragenter （當拖拽元素進入放置目標時觸發(fā)）
  • dragover （當拖拽元素在放置目標中移動時觸發(fā)，類似于mouseover）
  • drop （當拖拽元素放置在放置目標中時觸發(fā)）

如何成為拖動物體

在html中img元素默認可以進行拖拽，其它元素需要設置draggable=true，即可對其進行拖拽。

<div draggable="true"></div>

如何成為拖動目標

html中，元素默認不能成為放置目標，只有我們禁止了drapenter和drapover事件的默認行為時，可以稱為拖放目標。

droptarget.addEventListener('dragenter', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
  event.preventDefault();
});

拖放物體間如何傳遞信息

事件中具有一個dataTransfer對象，它擁有的兩個常用方法setData()和getData()，分別用于在存放拖拽信息以及獲取拖拽信息。其中，setData()只能在拖拽事件剛開始時設置，即dragstart事件時設置，getData()則一般在放置獲取，即drop事件觸發(fā)時獲取。

// drapobj 拖拽元素
// droptarget 放置目標
dragobj.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('drop', function(event) {
  var id = event.dataTransfer.getData('id');
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});

完整代碼

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

<head>
  <meta charset="UTF-8">
  <title>HTML5 拖拽</title>
</head>

<body>
  <div draggable="true"></div>
  <div  id="dragobj" draggable="true">
    <img src="c_06.jpg" alt="">
  </div>
  <div id="droptarget" ></div>
</body>
<script>
var droptarget = document.getElementById('droptarget');
var dragobj = document.getElementById('dragobj');

// drapobj 拖拽元素
// droptarget 放置目標
dragobj.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('dragenter', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('drop', function(event) {
  var id = event.dataTransfer.getData('id');
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});
</script>

</html>

存在問題

火狐瀏覽器中拖拽圖片默認打開新窗口，根據(jù)javascript高級程序設計中在drop事件中禁止默認事件，未解決問題。

解決方法：將圖片作為div的背景圖片，將div作為拖拽物體，則不存在此問題。

最終代碼

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

<head>
  <meta charset="UTF-8">
  <title>HTML5 拖拽</title>
  <style>
  div {
    width: 120px;
    height: 136px;
  }
  
  #dragobj {
    background: url('c_06.jpg') no-repeat;
  }
  
  #droptarget {
    background-color: #eee;
  }
  </style>
</head>

<body>
  <div id="dragobj" draggable="true">
  </div>
  <div id="droptarget"></div>
</body>
<script>
var droptarget = document.getElementById('droptarget');
var dragobj = document.getElementById('dragobj');

// drapobj 拖拽元素
// droptarget 放置目標
dragobj.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('dragenter', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('drop', function(event) {
  var id = event.dataTransfer.getData('id');
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});
</script>

</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手