关于拖拽

wanghui 发布于2019-08-21 11:31 / 1719人阅读

摘要：一直觉得拖拽能与用户互动，像我们平常的拖动排序弹出框拖动移动等用户自定义的动作都是拖拽实现的，它是一个比较有意思的角儿，今天我好好总结了一下下。

一直觉得拖拽能与用户互动，像我们平常的拖动排序、弹出框拖动移动等用户自定义的动作都是拖拽实现的，它是一个比较有意思的角儿，今天我好好总结了一下下。
拖拽动作：按下、移动、松开
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拖拽

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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