創(chuàng)建拖放對象

draggable 通過draggable告訴瀏覽器哪些元素需要實現(xiàn)拖拽功能。
有三個可選值：

1. true：元素可以被拖拽。
2. false：元素不能被拖拽。
3. auto：瀏覽器自己判斷元素是否能被拖拽(默認)

處理拖放事件

1. 對象拖放事件
   dragstart:按下鼠標鍵并開始移動時觸發(fā)。
   drag：在元素拖拽過程中持續(xù)觸發(fā)————>相似與mousemove。
   dragend：元素拖拽停止時觸發(fā)。

2. 對象拖放事件流程
   ondragstart：設(shè)置被拖圖片邊框色。

    img.ondragstart = function(event){
        event.target.className = 'red';
    }
   

ondrag：顯示被拖圖片的alt。

    img.ondrage = function(event){
        div.innerHTML = event.target.alt;
    }

ondragend：邊框色恢復原始狀態(tài)。

    img.ondragend = function(event){
        event.target.className = '';
    }

3. 投放區(qū)事件流程
   元素被拖動到有效的放置目標時，下列事件會依次發(fā)生：
   1. dragenter：當拖拽對象進入投放區(qū)時觸發(fā)。
   2. dragover：拖拽對象在投放區(qū)內(nèi)移動時持續(xù)觸發(fā)。
   3. dragleave：元素被拖出了投放區(qū)時觸發(fā)。
   4. drop：拖拽對象投放在投放區(qū)時觸發(fā)。

雖然所有元素都支持放置目標事件，但這些元素默認是不允許放置的，需要重寫事件的默認行為。

box.ondragenter = function(event){
    event.preventDefault();
}
box.ondragover = function(event){
    event.preventDefault();
}

在ondragover中一定要執(zhí)行preventDefault()否則ondrop事件不會被觸發(fā)。

dataTransfer對象方法

• dataTransfer對象(event對象屬性)
  該對象專門用于攜帶拖放過程中的數(shù)據(jù)。

• dataTransfer對象--常用方法
  setData(數(shù)據(jù)格式，數(shù)據(jù))
  將拖放元素的數(shù)據(jù)存入dataTranfer對象中
  getData(數(shù)據(jù)格式)
  讀取存入dataTransfer對象中的數(shù)據(jù)

  數(shù)據(jù)格式常用值為"Text"或"URL"

    tgt.ondragstart = function(event){
        msg.innerHTML = event.target.alt;
        img = event.target;//存儲拖拽圖片
        event.dataTransfer.setData('text','hello world');
        event.dataTransfer.setDragImage(icon,400,300);
        event.dataTransfer.effectAllowed="all";
    }
    box.ondragenter = function(event){
        box.style.borderColor = "red";
    }
    box.ondragover = function(event){
        event.preventDefault();//阻止瀏覽器默認行為
        event.dataTransfer.dropEffect = "move";
    }
    box.ondrop = function(event){
        event.preventDefault();//阻止瀏覽器默認行為
        box.appendChild(img);
        var txt = event.dataTransfer.getData('text');
        alert(txt);
    }
  

• dropEffect
  表示被拖動的元素能夠執(zhí)行哪種放置行為。
  可能的值：
  none：不能把拖動的元素放在這里。
  move：把拖動的元素移動到放置目標。
  copy：把拖動的元素復制到放置目標。
  link：放置目標會打開拖動的元素(有URL)

• effectAllowed
  允許拖動元素的哪種dropEffect
  允許值：
  copyLink：允許值為copy和link的dropEffect
  copyMove：允許值為copy和move的dropEffect
  linkMove：允許值為link和move的dropEffect
  all：允許任意的dropEffect

• 注意

  • dropEffect屬性搭配effectAllowed屬性使用
  • 在drgstart事件處理程序中設(shè)置effectAllowed屬性
  • 在dragover事件處理程序中設(shè)置dropEffect屬性
  • dropEffect的每個可能值都會導致光標顯示為不同的符號
  • 需要說明的是，除非effectAllowed屬性值為all，dropEffect與effectAllowed屬性值必須保持一致，否則，將不能顯示設(shè)置的拖放效果

• files文件

  • dataTransfer.files：如果是拖放文件，則返回正在拖放的文件列表FileList。
  • FileReader：專門用于讀取文件，F(xiàn)ileReader接口提供一些讀取文件的方法與一個包含讀取結(jié)果的事件模型。
  • FileReader.readAsDataURL方法：參數(shù)為要讀取的文件對象，將文件讀取為DataUrl
  • FileReader.onload事件：當讀取文件成功完成的時候出發(fā)此事件，在事件觸發(fā)后，你可以通過this.result來獲取讀取的文件數(shù)據(jù)，如果是圖片，將返回base64格式的圖片數(shù)據(jù)。

分享

常用分享工具

1. jiathis：http://www.jiathis.com/
2. bshare：http://www.bshare.cn/
3. 百度：http://share.baidu.com/