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é)之按鈕組工具欄，本文講解的就是大家最為常用的按鈕組工具欄，感興趣的小伙伴們可以參考一下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í)技巧,需要的朋友可以參考下。2010-02-02
JavaScript 實現(xiàn)模態(tài)對話框 源代碼大全
對話框在Windows應(yīng)用程序中使用非常普遍，許多應(yīng)用程序的設(shè)定，與用戶交互需要通過對話框來進(jìn)行，因此對話框是Windows應(yīng)用程序中最重要的界面元素之一，是與用戶交互的重要手段。2009-05-05
本人水平有限，這么個東東想了好幾天才弄出來個半成品，還有一些問題沒有解決，先放上來存著備忘，也望高手指點一二。2011-01-01
由 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