html5拖曳操作 HTML5實現網頁元素的拖放操作_HTML5教程
      
編輯Tag賺U幣
      


      教程Tag：拖曳拖放添加
      


      

      推薦：HTML5引入的新數組TypedArray介紹
      Javascript中的數組是個強大的家伙：你可以創建的時候不規定長度，而是動態的去改變長度。你可以把他當成普通的數組去讀取，也可以當他是堆棧來使用。你可以改變數組中每個元素的值甚至是類型
      

      HTML5之前，要實現網頁元素的拖放操作，需要依靠mousedown、mousemove、mouseup等API，通過大量的JS代碼來實現；HTML5中引入了直接支持拖放操作的API，大大簡化了網頁元素的拖放操作編程難度，并且這些API除了支持瀏覽器內部元素的拖放外，同時支持瀏覽器和其它應用程序之間的數據互相拖動。
      

      本文通過一個簡單示例，演示HTML5中拖放API的使用方法。
      

      場景：
      

      如下圖所示，我們要實現：
      

      通過拖放將照片從左側“相冊”區域拖拽到右側“垃圾箱”區域；拖拽過程中，“溫馨提示”部分要及時提醒，當前正在進行拖放操作；
      


      

      實現方法：
      

      如上界面的HTML代碼比較簡單，如下：

      復制代碼 代碼如下:www.wf0088.com

      <!DOCTYPE HTML>
      <html>
      <head>
          <title>HTML5實現拖拽操作</title>
          <meta charset="utf-8"/>
          <style>
              .album
              {
                  border: 3px dashed #ccc;
                  float: left;
                  margin: 10px;
                  min-height: 100px;
                  padding: 10px;
                  width: 220px;
              }
          </style>
      </head>
      <body">
          <div id="info">
              <h2>溫馨提示：可將照片直接拖到垃圾箱中</h2>
          </div>
          <div id="album" class="album">
              <h2>相冊</h2>
              <img draggable="true" id="img1" src="img/bg_01.png"  />
              <img draggable="true" id="img2" src="img/bg_02.png"  />
              <img draggable="true" id="img3" src="img/bg_03.png"  />
          </div>
          <div id="trash" class="album">
              <h2>垃圾箱</h2>
          </div>
          <br/>
      </body>
      </html>

      注意：如果要實現拖放操作，需要在待拖放的元素上增加draggable="true"屬性；
      

      接下來，再在onload事件中增加如下JS代碼即可，注釋比較詳盡，就不再單獨解釋。

      復制代碼 代碼如下:www.wf0088.com

          <script>
              function init(){
                  var info = document.getElementById("info");
                  //獲得被拖放的元素，本示例為相冊所在的DIV
                  var src = document.getElementById("album");
                  //開始拖放操作
                  src.ondragstart = function (e) {
                      //獲得被拖放的照片ID
                      var dragImgId = e.target.id;
                      //獲得被拖動元素
                      var dragImg = document.getElementById(dragImgId);
                      //拖放操作結束
                      dragImg.ondragend = function(e){
                          //恢復提醒信息
                          info.innerHTML="<h2>溫馨提示：可將照片直接拖到垃圾箱中</h2>";
                      };
                      e.dataTransfer.setData("text",dragImgId);
                  };
                  //拖放過程中
                  src.ondrag = function(e){   
                      info.innerHTML="<h2>--照片正在被拖動--</h2>";
                  }
                  //獲得拖放的目標元素
                  var target = document.getElementById("trash");
                  //關閉默認處理；
                  target.ondragenter = function(e){
                      e.preventDefault();
                  }
                  target.ondragover = function(e){
                      e.preventDefault();   
                  }
                  //有東西拖放到了目標元素
                  target.ondrop = function (e) {
                      var draggedID = e.dataTransfer.getData("text");
                      //獲取相冊中的DOM對象
                      var oldElem = document.getElementById(draggedID);
                      //從相冊DIV中刪除該照片的節點
                      oldElem.parentNode.removeChild(oldElem);
                      //將被拖動的照片DOM節點添加到垃圾桶DIV中；
                      target.appendChild(oldElem);
                      info.innerHTML="<h2>溫馨提示：可將照片直接拖到垃圾箱中</h2>";
                      e.preventDefault();
                  }
              }
          </script>

      實現效果： 
      


      

            
      分享：HTML5 語音搜索(淘寶店語音搜素)
      Html5支持語音搜索，可惜的是只有webkit核心的瀏覽器才能使用用法很簡單，只需要在input添加屬性x-webkit-speech即可,感興趣的朋友可以了解下
      


      

      



      


      來源：未知//所屬分類：HTML5教程/更新時間：2013-04-22


      

      



      


      



      相關HTML5教程：