摘要:一直覺得拖拽能與用戶互動,像我們平常的拖動排序彈出框拖動移動等用戶自定義的動作都是拖拽實現的,它是一個比較有意思的角兒,今天我好好總結了一下下。
一直覺得拖拽能與用戶互動,像我們平常的拖動排序、彈出框拖動移動等用戶自定義的動作都是拖拽實現的,它是一個比較有意思的角兒,今天我好好總結了一下下。
拖拽動作:按下、移動、松開
1、鼠標按下
</>復制代碼
obj.onmousedown = function(e){
}
2、鼠標移動
</>復制代碼
obj.onmousemove = function(e){
}
3、鼠標松開
</>復制代碼
obj.onmouseup = function(e){
}
原理:這里我找到一個圖片很形象,我決定bia給大家看看,主要就是鼠標移動的坐標和元素坐標之間的關系~
</>復制代碼
移動后元素的X坐標=鼠標移動后的X坐標 - 鼠標按下的X坐標 + 元素的初始X坐標
移動后元素的Y坐標=鼠標移動后的Y坐標 - 鼠標按下的Y坐標 + 元素的初始Y坐標
說白了就是求元素移動的坐標:
</>復制代碼
這里的中心是鼠標[見方法一]
元素移動后的x、y坐標=鼠標移動后按下的偏移量+元素的初始坐標
也可以這樣,原理是相通的:這里的中心是元素[見方法二]
元素移動后的x、y坐標=鼠標移動后的x、y坐標-(鼠標按下的xy坐標-元素初始坐標)
</>復制代碼
*注意:元素拖拽得定位一下,才能脫離文檔流* 推薦法二
方法一:
</>復制代碼
var mouseDownX,mouseDownY,initX,initY,flag = false;
obj.onmousedown = function(e) {
//鼠標按下時的鼠標所在的X,Y坐標
mouseDownX = e.pageX;
mouseDownY = e.pageY;
//初始位置的X,Y 坐標
initX = obj.offsetLeft;
initY = obj.offsetTop;
//表示鼠標已按下
flag = true;
}
document.onmousemove = function(e) {
// 確保鼠標已按下
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() {
//標識已松開鼠標
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;
}
}
</>復制代碼
移動端不是mousedown、mousemove和mouseup
相應的應是touchstart、touchmove和touchend
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/86800.html
摘要:在中,拖放是標準的一部分,任何元素都能夠拖放。如果需要設置允許放置,我們必須阻止對元素的默認處理方式方法。 系列文章 關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) ----- File關于前端上傳文件全面基礎掃盲貼(三) ----- FormData關于前端上傳文件全面基礎掃盲貼(...
摘要:頁面布局是流程操作欄,工具箱流程組件,繪圖區。關于這部分可以了解一下的流程拖拽方法,這里推薦大神張鑫旭的文章有了流程的模塊,當然還需要線路的指向。 目前有很多公司都有工作流的產品。關于工作流的架構大致都是將工作流制定一個規范、標準數據模板,后臺程序再解析這些數據模板。一些公司的工作流是數據庫配置的,其實推薦將工作流可視化,這樣就會節省人力和物力來讀懂這些數據。關于流程可視化必然想到了在...
摘要:頁面布局是流程操作欄,工具箱流程組件,繪圖區。關于這部分可以了解一下的流程拖拽方法,這里推薦大神張鑫旭的文章有了流程的模塊,當然還需要線路的指向。 目前有很多公司都有工作流的產品。關于工作流的架構大致都是將工作流制定一個規范、標準數據模板,后臺程序再解析這些數據模板。一些公司的工作流是數據庫配置的,其實推薦將工作流可視化,這樣就會節省人力和物力來讀懂這些數據。關于流程可視化必然想到了在...
摘要:寫在最前本次的分享是一個基于標簽實現的一個自定義視頻播放器。其中實現了播放暫停進度拖拽音量控制及全屏等功能。核心思路我相信一定會有些沒有接觸過制作自定義播放器的童鞋對于標簽的認識會停留在此。整個視頻播放器的基礎功能實現的還算完善。 寫在最前 本次的分享是一個基于HTML5標簽實現的一個自定義視頻播放器。其中實現了播放暫停、進度拖拽、音量控制及全屏等功能。歡迎關注我的博客,不定期更新中—...
閱讀 1918·2021-11-25 09:43
閱讀 1423·2021-11-22 14:56
閱讀 3289·2021-11-22 09:34
閱讀 2027·2021-11-15 11:37
閱讀 2282·2021-09-01 10:46
閱讀 1409·2019-08-30 15:44
閱讀 2306·2019-08-30 13:15
閱讀 2404·2019-08-29 13:07
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要