日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 
 
 
 

  
  
  
  
   
  
  
  
  
  item1

 
 
 
 

  
  
  
  
  
  
  
  
accept="divItem, imageItem"> 
 
 
 
 

 
 
 
 

  
  
  
  
   
  
  
  
  
  item1

創(chuàng)建 HTML 5 拖拽的源容器和目標(biāo)容器

在 HTML 5 中，我們需要給指定的節(jié)點(diǎn)來(lái)綁定一些事件來(lái)使之成為具有源容器或目標(biāo)容器的功能。在 HTML 5 的拖拽過(guò)程中的事件有 7 個(gè)，分別是應(yīng)用在目標(biāo)容器或拖動(dòng)節(jié)點(diǎn)上的 dragstart, drag, dragend 等 3 個(gè)事件，以及應(yīng)用在目標(biāo)容器節(jié)點(diǎn)上的dragenter, dragover, dragleave 和 drop 等 4 個(gè)事件。表 1 中對(duì)這些事件的觸發(fā)機(jī)制和常見的操作進(jìn)行了描述。

表 1. HTML 5 拖拽過(guò)程中可以綁定的事件

備注 : 在 Dojo 中所有 dnd 源容器或目標(biāo)容器在拖拽開始時(shí)都會(huì)調(diào)用 onDndStart 事件方法，而在 HTML 5 中只有拖動(dòng)的節(jié)點(diǎn)及源容器可以觸發(fā) dragstart 事件，其他容器包括目標(biāo)容器在拖動(dòng)開始時(shí)不會(huì)感知源容器及拖動(dòng)節(jié)點(diǎn)的 dragstart 事件。

清單 4 展示給目標(biāo)容器綁定 dragenter, dragover, dragleave, drop 事件的示例代碼。在 dragenter 和 dragleave 事件中，我們對(duì)目標(biāo)容器的背景樣式進(jìn)行修改使得用戶感知目標(biāo)容器的狀態(tài)(如圖 2 所示)。在 dragover 事件中我們對(duì)清單 3 中的鏈接元素(id 屬性值為 item3)的節(jié)點(diǎn)進(jìn)行了限制。drop 事件中我們要把拖動(dòng)的節(jié)點(diǎn)插入到目標(biāo)節(jié)點(diǎn)的 DOM 結(jié)構(gòu)中。

清單 4. 創(chuàng)建目標(biāo)容器的事件

 
 
 
 

  
  
  
  
var target = dojo.byId('target');   
  
  
  
  
 dojo.connect(target, 'dragover', function(e){   
  
  
  
  
  // doesn't allows link item (id = “item3”) to drop   
  
  
  
  
  if (e.dataTransfer.getData('id') != "item3"){   
  
  
  
  
    e.preventDefault();   
  
  
  
  
  }   
  
  
  
  
 });   
  
  
  
  
 
  
  
  
  
 dojo.connect(target, 'dragenter', function(e){   
  
  
  
  
  //add style   
  
  
  
  
  dojo.addClass(target, "over");   
  
  
  
  
 });   
  
  
  
  
 
  
  
  
  
 dojo.connect(target, 'dragleave', function(){   
  
  
  
  
  //remove style   
  
  
  
  
  dojo.removeClass(target, "over");   
  
  
  
  
 });   
  
  
  
  
 
  
  
  
  
 dojo.connect(target, 'drop', function(e){   
  
  
  
  
  //remove style if drop is successful   
  
  
  
  
  dojo.removeClass(target, "over");   
  
  
  
  
      
  
  
  
  
  // stops the browser from redirecting   
  
  
  
  
  if (e.stopPropagation) e.stopPropagation();   
  
  
  
  
      
  
  
  
  
    
  
  
  
  
  var itemId = e.dataTransfer.getData('id');   
  
  
  
  
  var dragItem = dojo.byId(itemId);   
  
  
  
  
  e.target.appendChild(dragItem);     
  
  
  
  
    
  
  
  
  
 }  
 
 
 
 

圖 2. 當(dāng)拖動(dòng)節(jié)點(diǎn)到目標(biāo)容器是時(shí)對(duì)目標(biāo)容器進(jìn)行高亮顯示

從清單 4 中我們?cè)谀繕?biāo)容器上對(duì)事件對(duì)象的 dataTransfer 屬性進(jìn)行了 getData 操作——取出了關(guān)鍵字 id 對(duì)應(yīng)的數(shù)據(jù)。在 HTML 5 拖拽過(guò)程中，用戶可以在表 1 定義的事件里通過(guò) event.dataTransfer 得到 DataTransfer 對(duì)象 ( 詳見 W3C 網(wǎng)站上的接口定義)并對(duì)其進(jìn)行定制傳輸數(shù)據(jù)、定制拖拽影像等操作。例如我們可以在 dragstart 事件中通過(guò) setData 方法初始化數(shù)據(jù)(代碼詳見附件)。表 2 中列出了這各數(shù)據(jù)對(duì)象的方法及常用的用途。

表 2. DataTransfer 的常用方法

與桌面進(jìn)行交互

除了在網(wǎng)頁(yè)中對(duì)一些頁(yè)面上的元素進(jìn)行拖拽以外，HTML 5 擴(kuò)充的 API 還允許網(wǎng)頁(yè)與文件系統(tǒng)進(jìn)行交互，比如從文件系統(tǒng)拖一個(gè)或幾個(gè)文件到網(wǎng)頁(yè)中，或是從網(wǎng)頁(yè)拖到文件系統(tǒng)中。以前者為例，當(dāng)我們從桌面或其它文件夾拖動(dòng)文件到網(wǎng)頁(yè)上某個(gè)目標(biāo)結(jié)點(diǎn)時(shí)，我們可以通過(guò) DataTransfer 的 files 屬性得到這些文件數(shù)量以及文件的屬性及內(nèi)容。DataTransfer.files.length 的大小即為拖動(dòng)文件的數(shù)量，當(dāng)沒(méi)有拖動(dòng)文件時(shí)，files.length 的大小即為 0，可用來(lái)判斷是否有文件拖動(dòng)。

清單 5. 通過(guò) dataTransfer.files 拿到文件對(duì)象

 
 
 
 

  
  
  
  
var files = e.dataTransfer.files;   
  
  
  
  
  var msg = "";   
  
  
  
  
  for (var i = 0; i < files.length; i++) {   
  
  
  
  
   console.log ("Name: " + files[i].name + ", fileSize: " + files[i].size);   
  
  
  
  
   var dataReader = new FileReader();   
  
  
  
  
   dataReader.onload = function(){   
  
  
  
  
     msg += ("content: " + dataReader.result);   
  
  
  
  
   }   
  
  
  
  
  dataReader.readAsText(files[i]);   
  
  
  
  
 }  
 
 
 
 

從清單 5 中的代碼中我們可以看到 files 中存儲(chǔ)了若干 file 對(duì)象，通過(guò)這個(gè)對(duì)象可以獲取文件名，文件大小等。然后我們可以通過(guò) FileReader 獲取文件的內(nèi)容。獲取內(nèi)容的 FileReader 并不是 HTML 5 拖拽的功能，而是借助了 File API 。它可以以文本，二進(jìn)制，以及 dataURL 的形式讀取，實(shí)現(xiàn)讀取文件內(nèi)容實(shí)現(xiàn)文件上傳等，在我們的示例代碼 HTML 5dndfile.html 中我們演示了通過(guò) readAsText 方法讀取文本文件和通過(guò) readAsDataURL 方法讀取圖像文件的使用。

與桌時(shí)行交互時(shí)，我們只需要對(duì)將清單 5 中給出的代碼稍加修改加到目標(biāo)容器的 drop 事件中，其它事件不用修改。例如清單 6 所示。

清單 6. 在目標(biāo)容器的 drop 事件讀取文本文件的內(nèi)容

 
 
 
 

  
  
  
  
dojo.connect(textdiv, 'drop', function(e){   
  
  
  
  
  if (e.stopPropagation){   
  
  
  
  
    e.stopPropagation(); // stops the browser from redirecting   
  
  
  
  
  }   
  
  
  
  
  var files = e.dataTransfer.files;   
  
  
  
  
  var msg = "";   
  
  
  
  
  for (var i = 0; i < files.length; i++) {   
  
  
  
  
    msg += ("Name: " + files[i].fileName + ", fileSize: " + files[i].fileSize);   
  
  
  
  
    var dataReader = new FileReader();   
  
  
  
  
    dataReader.onload = function(){   
  
  
  
  
      msg += ("content: " + dataReader.result);   
  
  
  
  
      textdiv.textContent = msg;   
  
  
  
  
    }   
  
  
  
  
    dataReader.readAsText(files[i]);   
  
  
  
  
  }   
  
  
  
  
 });  
 
 
 
 

這樣當(dāng)我們拖動(dòng)一個(gè)文本文件到指定的目標(biāo)區(qū)域時(shí)，我們就可以看到文件內(nèi)容。

Dojo 和 HTML 5 拖拽功能的比較和選擇

Dojo 實(shí)現(xiàn)了一套完整的拖拽框架和事件機(jī)制，并提供了默認(rèn)的實(shí)現(xiàn)，用戶可以通過(guò)聲明的方式快速實(shí)現(xiàn)拖拽，而且還可以通過(guò)繼承默認(rèn)的 Source、Target 以及 Avatar 實(shí)現(xiàn)拖拽定制化。從使用經(jīng)驗(yàn)上來(lái)看，Dojo 更傾向于完整的 DOM 節(jié)點(diǎn)操作，而數(shù)據(jù)的傳輸往往是通過(guò)綁在 DOM 節(jié)點(diǎn)上的屬性實(shí)現(xiàn)的。

HTML 5 的拖拽現(xiàn)在還在規(guī)范的定制和完善中，各個(gè)主流瀏覽器對(duì)該規(guī)范的支持也是各有千秋，基本上還處于發(fā)展的階段。本文中提供的示例僅在 Firefox 3.6 以上版本測(cè)試通過(guò)。HTML 5 作為新時(shí)代的 HTML 協(xié)議，拖拽事件中的 DataTransfer 接口體現(xiàn)了拖拽過(guò)程中以數(shù)據(jù)傳輸為中心的發(fā)展前景。與此同時(shí)，跟 File API 的結(jié)合可以使得 Web 應(yīng)用的數(shù)據(jù)交互通過(guò)拖拽操作延伸到最終用戶的桌面及文件系統(tǒng)上。另外 HTML 5 還可以實(shí)現(xiàn)在不同瀏覽器窗口之間的拖拽操作，也是拖拽過(guò)程傳輸數(shù)據(jù)的一種應(yīng)用。

小結(jié)

對(duì)比 Dojo 和 HTML 5，我們不難發(fā)現(xiàn)在使用 Dojo 比 HTML 5 可以更容易地開發(fā)出體驗(yàn)效果非常好的拖拽應(yīng)用;而 HTML 5 作為 HTML 的新規(guī)范，注重了拖拽過(guò)程中數(shù)據(jù)傳輸?shù)闹匾?。兩者如果可以融合則可以互補(bǔ)其短。通過(guò)實(shí)驗(yàn)，筆者發(fā)現(xiàn) Dojo dnd 與 HTML 5 拖拽暫時(shí)不能在同一結(jié)點(diǎn)上同時(shí)使用，由于 Dojo 是在 HTML4 規(guī)范基礎(chǔ)上的工具包，它們之間可能因在事件上的沖突會(huì)導(dǎo)致 HTML 5 拖拽不可用。但是我們有理由相信，隨著 HTML 5 規(guī)范的發(fā)展，將會(huì)有支持 HTML 5 拖拽的工具包出現(xiàn)，屆時(shí)開發(fā)者可以更為便捷的開發(fā)出更為豐富的 Web 應(yīng)用。

原文鏈接：http://www.ibm.com/developerworks/cn/web/1102_guoqing_draganddrop/