使用原生js实现元素拖拽功能

目录

• 1. 前言
• 2. 实现

前言

　　本篇仅对拖拽过程中核心几个事件监听的写法进行小结，不涉及页面样式效果的展现。

实现

//第一个参数传入拖拽DOM节点ID
//第二个参数为可选项传入工具名(业务需要，非重点)
function dragDom(idName,toolName){
    var toolNameVal = typeof toolName == "string" ? toolName : false;//第二个参数为可选参数，表示工具名称
    //根据传入id获取对应DOM元素
    var oDiv=document.getElementById(idName);
    var currentTop,currentLeft,zIndexVal;
    
    if(toolName){
        //targetOffsetLeft是拖拽的DOM元素相对于文档的左偏移
        var targetOffsetLeft = $("#"+toolName).offset().left;
        //targetOffsetTop是拖拽的DOM元素相对于文档的上偏移
        var targetOffsetTop = $("#"+toolName).offset().top;
    }
    
    //监听拖拽过程的鼠标点击下事件
    oDiv.onmousedown = function(ev){
        var oEvent= ev || event;
        var disX = oEvent.clientX - oDiv.offsetLeft;
        var disY = oEvent.clientY - oDiv.offsetTop;
        zIndexVal = $(oDiv).css("z-index");

        // ... ... 其他业务逻辑

        //事件浏览器兼容写法
        if(oDiv.setCapture){
            oDiv.onmousemove=fnMove;
            oDiv.onmouseup=fnUp;

            oDiv.setCapture();
        }
        else{
            document.onmousemove=fnMove;
            document.onmouseup=fnUp;
        }

        //监听拖拽过程的鼠标移动事件
        function fnMove(ev){
            var oEvent=ev||event;
            if(toolName=="key_index"){
                //获取currentLeft：
                currentLeft = oDiv.style.left = (oEvent.clientX-disX) <= (0-targetOffsetLeft) ? (0-targetOffsetLeft) + 'px' : (oEvent.clientX-disX) + 'px';
                //获取currentTop：
                currentTop  = oDiv.style.top = (oEvent.clientY-disY)<=(0-targetOffsetTop)? (0-targetOffsetTop)+'px' : (oEvent.clientY-disY)+'px';
            } else {
            		... ...
            }
            oDiv.style.zIndex = 1200;
        }

        //监听拖拽过程的鼠标松开事件
        function fnUp(){
            this.onmousemove=null;
            this.onmouseup=null;

            if(this.releaseCapture){
                this.releaseCapture();
            }
            if(toolName == "key_index"){
                //组件的坐标起点需要修改,修改浮层的z-index值,开始调用创建页面元素方法
                currentTop = parseInt(currentTop) + parseInt(document.body.scrollTop) - 120;
                currentLeft = parseInt(currentLeft) + 168;
                $(oDiv).parents("dl").removeAttr("style");
                //拖拽的工具没有超出工具，此时将视为无效拖拽（即只有当currentTop大于0时，说明才将元素由顶部组件栏拖入了main_work_content）
                //并还原拖拽层
                if(currentTop >= 0){
                    //console.log("currentTop:"+(parseInt(currentTop)-120)+"px;"+"currentLeft:"+(parseInt(currentLeft)+168)+"px");
                    createKeyIndex(currentTop,currentLeft,"main_work_content","key_warp");
                }
                //拖拽结束后重置拖拽层
                currentTop  = oDiv.style.left = 0;
                currentLeft = oDiv.style.top = 0;
                $(oDiv).removeAttr("style");
            }else if(toolName == "time_trend"){
            	
            }
        }


        //... ... 其他业务逻辑
    };
}