快捷導(dǎo)航

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

更新時間：2017年03月01日 16:15:34 作者：勤勞的小葉醬

這篇文章主要為大家詳細(xì)介紹了javascript html5輕松實現(xiàn)拖動功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

拖動物體上擁有的事件

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

拖動目標(biāo)上擁有的事件

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

如何成為拖動物體

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

如何成為拖動目標(biāo)

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

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

拖放物體間如何傳遞信息

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

// drapobj 拖拽元素
// droptarget 放置目標(biāo)
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 style="height: 150px" id="dragobj" draggable="true">
    <img src="c_06.jpg" alt="">
  </div>
  <div id="droptarget" style="width: 150px; height: 150px;background-color: #eee;"></div>
</body>
<script>
var droptarget = document.getElementById('droptarget');
var dragobj = document.getElementById('dragobj');

// drapobj 拖拽元素
// droptarget 放置目標(biāo)
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>

存在問題

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

解決方法：將圖片作為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 放置目標(biāo)
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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: