資訊專(zhuān)欄INFORMATION COLUMN
摘要：一直覺(jué)得拖拽能與用戶互動(dòng)，像我們平常的拖動(dòng)排序彈出框拖動(dòng)移動(dòng)等用戶自定義的動(dòng)作都是拖拽實(shí)現(xiàn)的，它是一個(gè)比較有意思的角兒，今天我好好總結(jié)了一下下。
一直覺(jué)得拖拽能與用戶互動(dòng)，像我們平常的拖動(dòng)排序、彈出框拖動(dòng)移動(dòng)等用戶自定義的動(dòng)作都是拖拽實(shí)現(xiàn)的，它是一個(gè)比較有意思的角兒，今天我好好總結(jié)了一下下。
拖拽動(dòng)作：按下、移動(dòng)、松開(kāi)
1、鼠標(biāo)按下
obj.onmousedown = function(e){
}
2、鼠標(biāo)移動(dòng)
obj.onmousemove = function(e){
}
3、鼠標(biāo)松開(kāi)
obj.onmouseup = function(e){
}
原理：這里我找到一個(gè)圖片很形象，我決定bia給大家看看，主要就是鼠標(biāo)移動(dòng)的坐標(biāo)和元素坐標(biāo)之間的關(guān)系～
移動(dòng)后元素的X坐標(biāo)＝鼠標(biāo)移動(dòng)后的X坐標(biāo) - 鼠標(biāo)按下的X坐標(biāo) + 元素的初始X坐標(biāo) 移動(dòng)后元素的Y坐標(biāo)＝鼠標(biāo)移動(dòng)后的Y坐標(biāo) - 鼠標(biāo)按下的Y坐標(biāo) + 元素的初始Y坐標(biāo)
說(shuō)白了就是求元素移動(dòng)的坐標(biāo)：
這里的中心是鼠標(biāo)［見(jiàn)方法一］
元素移動(dòng)后的x、y坐標(biāo)＝鼠標(biāo)移動(dòng)后按下的偏移量＋元素的初始坐標(biāo)
也可以這樣，原理是相通的：這里的中心是元素［見(jiàn)方法二］
元素移動(dòng)后的x、y坐標(biāo)＝鼠標(biāo)移動(dòng)后的x、y坐標(biāo)－（鼠標(biāo)按下的xy坐標(biāo)－元素初始坐標(biāo)）
*注意：元素拖拽得定位一下，才能脫離文檔流* 推薦法二
方法一：
var mouseDownX,mouseDownY,initX,initY,flag = false;
obj.onmousedown = function(e) {
//鼠標(biāo)按下時(shí)的鼠標(biāo)所在的X，Y坐標(biāo)
mouseDownX = e.pageX;
mouseDownY = e.pageY;
//初始位置的X，Y 坐標(biāo)
initX = obj.offsetLeft;
initY = obj.offsetTop;
//表示鼠標(biāo)已按下
flag = true;
}
document.onmousemove = function(e) {
// 確保鼠標(biāo)已按下
if(flag) {
var mouseMoveX = e.pageX,mouseMoveY = e.pageY;
this.style.left = parseInt(mouseMoveX) - parseInt(mouseDownX) + parseInt(initX) + "px";
this.style.top = parseInt(mouseMoveY) - parseInt(mouseDownY) + parseInt(initY) + "px";
}
}
document.onmouseup = function() {
//標(biāo)識(shí)已松開(kāi)鼠標(biāo)
flag = false;
}
方法二：
oDiv.onmousedown=function(ev){
var x=ev.pageX-oDiv.offsetLeft;
var y=ev.pageY-oDiv.offsetTop;
document.onmousemove=function(ev){
var l=ev.pageX-x;
var t=ev.pageY-y;
oDiv.style.left=l+"px";
oDiv.style.top=t+"px";
}
document.onmouseup=function () {
document.onmousemove=null;
document.onmouseup=null;
}
}
移動(dòng)端不是mousedown、mousemove和mouseup
相應(yīng)的應(yīng)是touchstart、touchmove和touchend
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86800.html
摘要：在中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式方法。 系列文章 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) ----- File關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(三) ----- FormData關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(...
摘要：頁(yè)面布局是流程操作欄，工具箱流程組件，繪圖區(qū)。關(guān)于這部分可以了解一下的流程拖拽方法，這里推薦大神張?chǎng)涡竦奈恼掠辛肆鞒痰哪K，當(dāng)然還需要線路的指向。 目前有很多公司都有工作流的產(chǎn)品。關(guān)于工作流的架構(gòu)大致都是將工作流制定一個(gè)規(guī)范、標(biāo)準(zhǔn)數(shù)據(jù)模板，后臺(tái)程序再解析這些數(shù)據(jù)模板。一些公司的工作流是數(shù)據(jù)庫(kù)配置的，其實(shí)推薦將工作流可視化，這樣就會(huì)節(jié)省人力和物力來(lái)讀懂這些數(shù)據(jù)。關(guān)于流程可視化必然想到了在...
摘要：頁(yè)面布局是流程操作欄，工具箱流程組件，繪圖區(qū)。關(guān)于這部分可以了解一下的流程拖拽方法，這里推薦大神張?chǎng)涡竦奈恼掠辛肆鞒痰哪K，當(dāng)然還需要線路的指向。 目前有很多公司都有工作流的產(chǎn)品。關(guān)于工作流的架構(gòu)大致都是將工作流制定一個(gè)規(guī)范、標(biāo)準(zhǔn)數(shù)據(jù)模板，后臺(tái)程序再解析這些數(shù)據(jù)模板。一些公司的工作流是數(shù)據(jù)庫(kù)配置的，其實(shí)推薦將工作流可視化，這樣就會(huì)節(jié)省人力和物力來(lái)讀懂這些數(shù)據(jù)。關(guān)于流程可視化必然想到了在...
摘要：寫(xiě)在最前本次的分享是一個(gè)基于標(biāo)簽實(shí)現(xiàn)的一個(gè)自定義視頻播放器。其中實(shí)現(xiàn)了播放暫停進(jìn)度拖拽音量控制及全屏等功能。核心思路我相信一定會(huì)有些沒(méi)有接觸過(guò)制作自定義播放器的童鞋對(duì)于標(biāo)簽的認(rèn)識(shí)會(huì)停留在此。整個(gè)視頻播放器的基礎(chǔ)功能實(shí)現(xiàn)的還算完善。 寫(xiě)在最前 本次的分享是一個(gè)基于HTML5標(biāo)簽實(shí)現(xiàn)的一個(gè)自定義視頻播放器。其中實(shí)現(xiàn)了播放暫停、進(jìn)度拖拽、音量控制及全屏等功能。歡迎關(guān)注我的博客，不定期更新中—...
閱讀 1918·2021-11-25 09:43
閱讀 1423·2021-11-22 14:56
閱讀 3288·2021-11-22 09:34
閱讀 2027·2021-11-15 11:37
閱讀 2282·2021-09-01 10:46
閱讀 1409·2019-08-30 15:44
閱讀 2305·2019-08-30 13:15
閱讀 2404·2019-08-29 13:07
