javascript實現(xiàn)的元素拖動函數(shù)宿主為瀏覽器

更新時間：2014年07月21日 16:59:36 投稿：whsnow

這篇文章主要介紹了javascript實現(xiàn)的元素拖動，將相應(yīng)的元素對象的引用傳到函數(shù)中

//宿主為瀏覽器  
//將相應(yīng)的元素對象的引用傳到函數(shù)中  
function candrag(drager) { 
  drager.onmousedown = function (down) { 
    var offx = drager.offsetLeft 
    var offy = drager.offsetTop; 
    var offxl = down.clientX - offx; 
    var offyl = down.clientY - offy; 
    window.condition = 0;//為window添加了condition屬性，用于解決和click之間的矛盾  
    document.onmousemove = function (move) { 
      drager.style.left = move.clientX - offxl + "px"; 
      drager.style.top = move.clientY - offyl + "px"; 
      drager.style.cursor = "move"; 
      condition = Math.abs(move.clientX - down.clientX) + Math.abs(move.clientY - down.clientY); 
    } 
  } 
  drager.onmouseup = function () { 
    document.onmousemove = null; 
    draggerr.style.cursor = "auto"; 
  } 
} 
/*對于和click之間的矛盾解決，需要判斷condition 
*例如： 
candrag(dragger); 
d01.onclick = function () { 
  if (!condition) { 
    d01.style.backgroundColor = "red"; 
  } 
} 
*其中，d01為dragger的子元素 
*/

您可能感興趣的文章:

拖動

相關(guān)文章

Bootstrap每天必學(xué)之按鈕
Bootstrap每天必學(xué)之按鈕組工具欄，本文講解的就是大家最為常用的按鈕組工具欄，感興趣的小伙伴們可以參考一下
2015-11-11
JS+JSP通過img標(biāo)簽調(diào)用實現(xiàn)靜態(tài)頁面訪問次數(shù)統(tǒng)計的方法
這篇文章主要介紹了JS+JSP通過img標(biāo)簽調(diào)用實現(xiàn)靜態(tài)頁面訪問次數(shù)統(tǒng)計的方法,基于JavaScript動態(tài)調(diào)用jsp頁面通過對TXT文本文件的讀寫實現(xiàn)統(tǒng)計訪問次數(shù)的功能,需要的朋友可以參考下
2015-12-12
微信小程序簡單實現(xiàn)form表單獲取輸入數(shù)據(jù)功能示例
這篇文章主要介紹了微信小程序簡單實現(xiàn)form表單獲取輸入數(shù)據(jù)功能,涉及微信小程序針對form表單的事件綁定及數(shù)據(jù)獲取等相關(guān)操作技巧,需要的朋友可以參考下
2017-11-11
js使用html()或text()方法獲取設(shè)置p標(biāo)簽的顯示的值
html()方法可以用來讀取或者設(shè)置某個元素中的HTML內(nèi)容，text()方法可以用來讀取或者沒置某個元素中的文本內(nèi)容
2014-08-08
JavaScript 學(xué)習(xí)技巧
JavaScript 學(xué)習(xí)技巧,需要的朋友可以參考下。
2010-02-02
JavaScript 實現(xiàn)模態(tài)對話框源代碼大全
對話框在Windows應(yīng)用程序中使用非常普遍，許多應(yīng)用程序的設(shè)定，與用戶交互需要通過對話框來進(jìn)行，因此對話框是Windows應(yīng)用程序中最重要的界面元素之一，是與用戶交互的重要手段。
2009-05-05
JS無限樹狀列表實現(xiàn)代碼
本人水平有限，這么個東東想了好幾天才弄出來個半成品，還有一些問題沒有解決，先放上來存著備忘，也望高手指點一二。
2011-01-01
認(rèn)識延遲時間為0的setTimeout
由 John Resig 的 How JavaScript Timers Work 可以知道，現(xiàn)有的 JavaScript 引擎是單線程處理任務(wù)的。它把任務(wù)放到隊列中，不會同步去執(zhí)行，必須在完成一個任務(wù)后才開始另外一個任務(wù)。
2008-05-05
JS簡單實現(xiàn)查看文檔創(chuàng)建日期、修改日期和文檔大小的方法示例
這篇文章主要介紹了JS簡單實現(xiàn)查看文檔創(chuàng)建日期、修改日期和文檔大小的方法,結(jié)合實例形式分析了JavaScript使用fileCreatedDate屬性、fileModifiedDate屬性、lastModified屬性和fileSize屬性相關(guān)操作技巧,需要的朋友可以參考下
2018-04-04
JS+HTML5 Canvas實現(xiàn)簡單的寫字板功能示例
這篇文章主要介紹了JS+HTML5 Canvas實現(xiàn)簡單的寫字板功能,結(jié)合實例形式分析了js結(jié)合HTML5 canvas特性的圖形繪制相關(guān)操作技巧,需要的朋友可以參考下
2018-08-08