關于拖拽

wanghui 發布于2019-08-21 11:31 / 1641人閱讀

摘要：一直覺得拖拽能與用戶互動，像我們平常的拖動排序彈出框拖動移動等用戶自定義的動作都是拖拽實現的，它是一個比較有意思的角兒，今天我好好總結了一下下。

一直覺得拖拽能與用戶互動，像我們平常的拖動排序、彈出框拖動移動等用戶自定義的動作都是拖拽實現的，它是一個比較有意思的角兒，今天我好好總結了一下下。
拖拽動作：按下、移動、松開
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

GPU云服務器云服務器拖拽庫表拖拽拖拽 html拖拽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86800.html

關于前端上傳文件全面基礎掃盲貼(五) ----- H5拖拽事件

摘要：在中，拖放是標準的一部分，任何元素都能夠拖放。如果需要設置允許放置，我們必須阻止對元素的默認處理方式方法。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) ----- File關于前端上傳文件全面基礎掃盲貼(三) ----- FormData關于前端上傳文件全面基礎掃盲貼(...

iKcamp 2019-08-26 10:31 評論0 收藏0
ES6流程拖拽實現思路

摘要：頁面布局是流程操作欄，工具箱流程組件，繪圖區。關于這部分可以了解一下的流程拖拽方法，這里推薦大神張鑫旭的文章有了流程的模塊，當然還需要線路的指向。目前有很多公司都有工作流的產品。關于工作流的架構大致都是將工作流制定一個規范、標準數據模板，后臺程序再解析這些數據模板。一些公司的工作流是數據庫配置的，其實推薦將工作流可視化，這樣就會節省人力和物力來讀懂這些數據。關于流程可視化必然想到了在...

myshell 2019-08-02 16:13 評論0 收藏0
ES6流程拖拽實現思路

摘要：頁面布局是流程操作欄，工具箱流程組件，繪圖區。關于這部分可以了解一下的流程拖拽方法，這里推薦大神張鑫旭的文章有了流程的模塊，當然還需要線路的指向。目前有很多公司都有工作流的產品。關于工作流的架構大致都是將工作流制定一個規范、標準數據模板，后臺程序再解析這些數據模板。一些公司的工作流是數據庫配置的，其實推薦將工作流可視化，這樣就會節省人力和物力來讀懂這些數據。關于流程可視化必然想到了在...

mylxsw 2019-08-23 16:56 評論0 收藏0
從零實現一個自定義html5播放器

摘要：寫在最前本次的分享是一個基于標簽實現的一個自定義視頻播放器。其中實現了播放暫停進度拖拽音量控制及全屏等功能。核心思路我相信一定會有些沒有接觸過制作自定義播放器的童鞋對于標簽的認識會停留在此。整個視頻播放器的基礎功能實現的還算完善。寫在最前本次的分享是一個基于HTML5標簽實現的一個自定義視頻播放器。其中實現了播放暫停、進度拖拽、音量控制及全屏等功能。歡迎關注我的博客，不定期更新中—...

張遷 2019-08-21 18:39 評論0 收藏0