HTML DOM 是 W3C 標(biāo)準(zhǔn)（是 HTML 文檔對(duì)象模型的英文縮寫，Document Object Model for HTML）。通過 DOM，可以訪問所有的 HTML 元素，連同它們所包含的文本和屬性。可以對(duì)其中的內(nèi)容進(jìn)行修改和刪除，同時(shí)也可以創(chuàng)建新的元素。

摘要：

　　最近在項(xiàng)目中要做一個(gè)圖片預(yù)覽的功能，這時(shí)候會(huì)遇到用戶上傳很大的圖片，已經(jīng)超出視圖界面。最終決定做一個(gè)在固定寬和高的位置，用戶可以拖動(dòng)圖片查看。所以自己就寫了一個(gè)支持ie5+，chrome，F(xiàn)irefox，opera等瀏覽器的可拖動(dòng)dom元素的插件。

實(shí)現(xiàn)這個(gè)功能所需要的知識(shí)點(diǎn)不多，如下：

1、js中element.style.left

style.left返回的變量是個(gè)字符串，是個(gè)可改變量

js中element.offsetLeft

offsetLeft返回的是個(gè)int類型，不可改變量（意思就是說，改這個(gè)變量是不會(huì)影響布局的)

2、js 中event.clientX

clientX 事件屬性返回當(dāng)事件被觸發(fā)時(shí)鼠標(biāo)指針向?qū)τ跒g覽器頁面（或客戶區(qū)）的水平坐標(biāo)。

3、js中element.className

改變樣式的類的方法

以上三點(diǎn)都是些比較熟的知識(shí)了，想說的是以下這點(diǎn)：

4、js中為對(duì)象添加事件監(jiān)控

element.addEventListener("event","fun","boolen");

event:表示事件

fun:指的是事件觸發(fā)后執(zhí)行的函數(shù)

項(xiàng)目地址：https://github.com/baixuexiyang/drag

實(shí)例：

var drag = new Drag("test", {
      onStart: function(){

      },
      onMove: function(){
        document.getElementById('position').innerHTML = '距離左邊：' + drag.getPositions().left + '；距離頂部：' + drag.getPositions().top;
      },
      onStop: function(){

      }
    });

我們?cè)匍_看一個(gè)實(shí)例中遇到的問題，這個(gè)問題我弄了好久都找不出很好的解決方法

我們來看個(gè)例子：（方便測(cè)試，我把代碼寫在一個(gè)文件里面）

drag.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title>鼠標(biāo)拖拽</title> 
  <style type="text/css"> 
    <!-- 
    #dragdiv{ 
      background-color:#0A0909; 
      height:200px; 
      width:157px; 
     
      position:absolute; 
    } 
    .ondrag{ 
      filter:alpha(opacity=200); 
      cursor:move; 
    } 
    .enddrag{ 
      filter:alpha(opacity=100); 
      cursor:default; 
    } 
    #father{ 
      width:600px; 
      height:700px; 
      background:#C63535; 
    } 
    --> 
  </style> 
</head> 
<body> 
  <div id="father"> 
  <div id="dragdiv"></div> 
  </div> 
  <script language="JavaScript"> 
    var dragdiv=document.getElementById("dragdiv"); 
    var father=document.getElementById("father"); 
    var offsetx=0; 
    var offsety=0; 
    var draging=false; 
    function beforeDrag(ev){ 
       
        if (!draging) { 
          draging = true; 
          var l = dragdiv.offsetLeft; 
          var t = dragdiv.offsetTop; 
          offsetx = ev.clientX - l; 
          offsety = ev.clientY - t; 
           
        } 
        else { 
          dragdiv.className = "enddrag"; 
          dragdiv.removeEventListener("mousemove",onDrag); 
          draging = false; 
          return; 
        } 
       
    } 
    function endDrag(){ 
      draging=false; 
      dragdiv.className="enddrag"; 
    } 
    function onDrag(ev){ 
      if (!draging) { 
        dragdiv.className = "enddrag"; 
        return; 
      } 
      else { 
        dragdiv.className = "ondrag"; 
       
        dragdiv.style.left = (ev.clientX - offsetx) + "px"; 
        dragdiv.style.top = (ev.clientY - offsety) + "px"; 
         
      } 
    } 
      dragdiv.addEventListener("mousedown",beforeDrag,true); 
      dragdiv.addEventListener("mousemove",onDrag,false); 
      dragdiv.addEventListener("mouseup",endDrag,true); 
 
  </script> 
 
</body> 
 
</html>

代碼很簡(jiǎn)單，肯用一點(diǎn)點(diǎn)心看的話，都能看懂了

第一次拖拽很成功，按住鼠標(biāo)進(jìn)行拖。第二次就不正常了，要想第二次正常，必須鼠標(biāo)點(diǎn)一下其他地方（就是非拖拽部分）

上面的鼠標(biāo)事件

"mousedown”是指按下鼠標(biāo)時(shí)觸發(fā)此事件，（上面觸發(fā)了beforeDrag函數(shù))

"mousemove"指鼠標(biāo)移動(dòng)時(shí)觸發(fā)此事件，（上面觸發(fā)了onDrag函數(shù)）

"mouseup"指鼠標(biāo)按下后松開鼠標(biāo)時(shí)觸發(fā)此事件。（上面觸發(fā)了endDrag函數(shù))

ps:網(wǎng)上查的鼠標(biāo)時(shí)間是"onmousedown",筆者實(shí)驗(yàn)"onmousedown"沒有事件響應(yīng),"mousedowm"才正常

上面所說的問題，嘗試了很多實(shí)驗(yàn)，考慮到了addEventListener的順序問題，第三個(gè)參數(shù)true/false的事件流問題，還是沒有找到完美的解決方法

"mouseup"事件在第二次監(jiān)控就失敗了，重新獲取焦點(diǎn)才正常（就是鼠標(biāo)點(diǎn)一下其他地方）

您可能感興趣的文章: