淺談js原生拖放_關於JavaScript

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 淺談js原生拖放

淺談js原生拖放

編輯：關於JavaScript

可拖動

網頁中的圖像、鏈接和文本是浏覽器默認可以被拖動的，HTML5 為所有的HTML元素都提供了一個draggable屬性，當這個屬性的值為true的時候，元素被視為可以拖動。

拖動圖像或者鏈接時，將鼠標放在圖像或者鏈接上，按住鼠標不放就可以拖動它。拖動文本時，要先選中文本，然後可以像拖動圖像一樣拖動選中的文本。

被拖動的元素事件

拖動圖片時依次觸發：drapstart,drag,dragend事件。這三個事件的目標都是被拖動的元素。

按下鼠標鍵並開始移動鼠標時，會在被拖放元素上觸發dragstart事件。觸發dragstart事件後，隨即會觸發drag事件，而且在元素被拖動期間會持續觸發drag事件；當拖動停止後，無論把元素放到了有效的放置目標還是無效的放置目標上都會觸發dragend事件。

放置目標元素事件

當某個元素被拖動到一個有效的放置目標上時，會一次觸發：dragenter,dragover,dragleave或drop事件

只要有元素被拖動到放置目標上就會觸發dragenter事件，緊隨其後的是dragover事件，而且在被拖動的元素還在放置目標的范圍內移動時，就會持續觸發dragover事件；如果元素被拖出了放置目標就不在觸發dragover事件，就會觸發dragleave事件。如果元素被放到了放置目標中，就會觸發drop事件而不是dragleave事件。這幾個事件的目標都是作為放置目標的元素。

谷歌浏覽器中支持效果好，火狐效果不好

自定義放置目標

我們可以把任何元素變成有效的放置目標，方法是重寫dragenter和dragover事件的默認行為

在FF中，放置事件的默認行為是打開被放到放置目標上的URL。換句話說，如果是把圖像拖放

到放置目標上，頁面就會轉向圖像文件；如果是把文本拖放到放置目標上，則會導致無效的URL錯誤。

因此，為了讓FF支持正常的拖放，還要取消drop事件的默認行為，阻止它打開URL。

dataTransfer對象

原生拖放當中最大的特性就是可以利用拖放事件傳遞數據，這樣使浏覽器原生就可以支持類似於桌面應用的拖放交互功能。要使用數據傳輸功能就需要一個名為 dataTransfer 的接口。

dataTransfer對象是事件對象的一個屬性，它有兩個主要方法：getData()和setData()。setData() 用於保存值，getData() 用於獲得 setData() 保存的值。

在拖動文本框中的文本時，浏覽器會調用setData()方法，將拖動的文本以"text"格式保存在dataTransfer對象中。類似的，在拖放鏈接或者圖像時，會調用setData()方法並保存URL。然後，在這些元素被拖放到放置目標時，就可以通過getData()方法讀到這些數據了。

保存的數據類型為"text"或"url"，在HTML5中這兩種數據類型被映射為"text/plain"和"text/uri-list"

將數據保存為文本和URL是有區別的。如果將數據保存為文本格式，那麼數據不會得到任何特殊處理。而如果將數據保存為URL，浏覽器會將其當成網頁中的鏈接。換句話說，如果你把它放置到另一個浏覽器窗口中，浏覽器就會打開該URL。

Demo:

文本拖放：

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<title>HTML5文本拖放</title>
<head>
<style type="text/css">
#div1 {width:220px;height:185px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p id="p1">拖動文本到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
  //dataTransfer.setData() 方法設置被拖數據的數據類型和值
  //這裡數據類型是 "Text"，值是p標簽中的文本
ev.dataTransfer.setData("Text",document.getElementById("p1").innerHTML);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.innerHTML=data;
}
</script>
</body>
</html>

鏈接拖放：

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<title>HTML5鏈接拖放</title>
<head>
<style type="text/css">
#div1 {width:220px;height:185px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<a href="http://www.baidu.com" id="aa">鏈接到百度</a>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<script type="text/javascript">
/*
ondragover 事件規定在何處放置被拖動的數據。
默認地，無法將數據元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。
 */
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
  //dataTransfer.setData() 方法設置被拖數據的數據類型和值
  //這裡數據類型是 "Text"，值是p標簽中的文本
ev.dataTransfer.setData("URL",document.getElementById(data).href);
}

function drop(ev)
{
  //調用 preventDefault() 來避免浏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）
ev.preventDefault();
//通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。
var data=ev.dataTransfer.getData("URL");
ev.target.innerHTML=data;
}
</script>
</body>
</html>

圖片拖放：

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<title>HTML5圖片拖放</title>
<head>
<style type="text/css">
#div1 {width:220px;height:185px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p id="p1">拖動圖片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="abao.png" draggable="true" ondragstart="drag(event)" width="220" height="181">
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
  //dataTransfer.setData() 方法設置被拖數據的數據類型和值
  //這裡數據類型是 "Text"，值是可拖動元素的 id ("drag1")
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>

圖片來回拖放：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>圖片來回拖放</title>
    <style type="text/css">
    div{width: 230px;height: 185px;padding: 10px;float: left;margin-right: 10px;border: 1px solid#ccc;}
    </style>
  </head>
  <body>
  <div id="box1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="box2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <img src="abao.png" id="drag1" draggable="true" ondragstart="drag(event)">
  <script type="text/javascript">
  function allowDrop(ev){
    ev.preventDefault();
  }
  function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
  }
  function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
  }
  </script>
  </body>
</html>

dropEffect和effectAllowed屬性

利用dataTransfer對象，不光是能夠傳輸數據，還能夠通過它來確定被拖動的元素以及作為放置目標的元素能夠接收什麼操作。這需要訪問其兩個屬性：dropEffect屬性和effectAllowed屬性。

dropEffect 浏覽器會根據不同的值顯示不同類型的光標，提升用戶放置後的行為。 dropEffect 包括以下幾個值:

•"none": 不能把拖動的元素放在這裡

•"move": 應該把拖動的元素移動到放置目標

•"copy": 應該把拖動的元素復制到放置目標

•"link":表示放置目標會打開拖動的元素 (但拖動的元素必須是一個鏈接，有URL)

浏覽器僅僅會幫你改變光標的類型，但是要實現怎樣的效果都是要開發者自己去實現。

dropEffect屬性只有搭配effectAllowed屬性才有用，effectAllowed屬性表示允許拖動元素的哪種dropEffect行為，它的值有以下幾種：

•"uninitialized":沒有給被拖動的元素設置任何放置行為。

•"none": 被拖動的元素不能有任何行為

•"copy“：只允許值為 “copy” 的放置行為

•"link":只允許值為 “link” 的放置行為

•"move"：只允許值為 “move” 的放置行為

•"copyLink"：允許值為 “copy” 和 “link” 的放置行為

•"copyMove"：允許值為 “copy” 和 “move” 的放置行為

•"linkMove"：允許值為 “link” 和 “move” 的放置行為

•"all"：允許所有放置行為

必須在ondragstart事件處理程序中設置effectAllowed屬性

Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My-dropEffect and effectAllowed</title>
</head>
<body>
  <a href="http://www.baidu.com">鏈接到百度</a>
  <div style="width: 200px; height: 100px; float: right; background: red" id="droptarget"></div>
  <div id="output"></div>
  <script type="text/javascript" src="EventUtil.js"></script>
  <script type="text/javascript">
  var droptarget = document.getElementById("droptarget");//獲取放置目標
  var link = document.links[0];
  //console.log(document.links);//HTMLCollection[a]
  //console.log(document.links[0]);// <a href="http://www.baidu.com">
    function handleEvent(event){
      document.getElementById("output").innerHTML += event.type + "<br>";
      switch(event.type){
        case "dragstart":
        case "dragend":
          event.dataTransfer.dropEffect = "link";//表示放置目標會打開拖動的元素。要想使用dropEffect，必須進行相應的設置，這裡將其設置為link
          break;
        case "dragenter":
        case "dragover":
          EventUtil.preventDefault(event);
          event.dataTransfer.effectAllowed = "link";//表示值允許"link"的dropEffect
          break;
        case "drop":
        case "dragleave":
          droptarget.innerHTML = event.dataTransfer.getData("url") || event.dataTransfer.getData("text/uri-list");
        //event.dataTransfer.getData("url") || event.dataTransfer.getData("text/uri-list");是讀取URL
      }

    }

    EventUtil.addHandler(droptarget, "dragenter", handleEvent);
    EventUtil.addHandler(droptarget, "dragover", handleEvent);
    EventUtil.addHandler(droptarget, "dragleave", handleEvent);
    EventUtil.addHandler(droptarget, "drop", handleEvent);
    EventUtil.addHandler(link, "dragstart", handleEvent);
    EventUtil.addHandler(link, "dragend", handleEvent);
  </script>
</body>
</html>

Demo2:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My-dropEffect and effectAllowed</title>
</head>
<body>
<a href="http://www.baidu.com">鏈接到百度</a>
  <p>哈哈哈哈</p>
  <div style="width: 200px; height: 100px; float: right; background: red" id="droptarget"></div>
  <div id="output"></div>
  <script type="text/javascript" src="../EventUtil.js"></script>
  <script type="text/javascript">
  var droptarget = document.getElementById("droptarget");//獲取放置目標
  var link = document.links[0];
  //console.log(document.links);//HTMLCollection[a]
  //console.log(document.links[0]);// <a href="http://www.baidu.com">
    function handleEvent(event){
      document.getElementById("output").innerHTML += event.type + "<br>";
      switch(event.type){
        case "dragstart":
        case "dragend":
          event.dataTransfer.dropEffect = "move";//表示應該把拖動的元素移動到放置目標
        case "dragenter":
        case "dragover":
          EventUtil.preventDefault(event);
          event.dataTransfer.effectAllowed = "move";//表示值允許"move"的dropEffect
          break;
        case "drop":
        case "dragleave":
          EventUtil.preventDefault(event);
          //這裡是為了阻止放置事件的默認行為：打開被放到放置目標上的URL
          droptarget.innerHTML = event.dataTransfer.getData("Text");
      }

    }
    EventUtil.addHandler(droptarget, "dragenter", handleEvent);
    EventUtil.addHandler(droptarget, "dragover", handleEvent);
    EventUtil.addHandler(droptarget, "dragleave", handleEvent);
    EventUtil.addHandler(droptarget, "drop", handleEvent);
    EventUtil.addHandler(link, "dragstart", handleEvent);
    EventUtil.addHandler(link, "dragend", handleEvent);
  </script>
</body>
</html>

以上這篇淺談js原生拖放就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。

上一頁:Bootstrap Modal遮罩彈出層代碼分享
下一頁:weUI應用之JS常用信息提示彈層的封裝

關於JavaScript

javascript使用window.open提示“已經計劃系統關機”的原因: javascript調用window.open打開網站的時候，IE浏覽器下報錯：已經計劃系統關機，提
javascript獲取隱藏dom的寬高具體實現: 首先clone一個DOM，設置position:absolute，然後設置top為一個比較大的負值，
JSONP原理及簡單實現: 在web2.0時代，熟練的使用ajax是每個前端攻城師必備的技能。然而由於受到浏覽器的限制，ajax

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章