js实现div拖动

这里对于鼠标经过input时，使得拖动失效，因此通过对input绑定onmouseover事件，获取鼠标经过的标签name

 var inputName;
    boxid.onmouseover = function (event) {
        inputName = event.target.name;//鼠标每经过一个元素，获取name
    }

获取所需拖动的div

var div=document.getElementById("divId");

对div绑定点击事件，在绑定鼠标移动事件时，判断鼠标经过的元素是否为当前所需要排除的input元素（这里通过设置元素的name进行判断）

draggableBox(div, "name")

function draggableBox(boxid, name) {//拖动事件
    var draggable = true;
    var inputName;
    boxid.onmouseover = function (event) {
        inputName = event.target.name;//鼠标每经过一个元素，就把该元素赋值给变量el
    }
    boxid.onmousedown = function (evt) {
        var oEvent = evt || event; //获取事件对象，兼容写法
        var disX = oEvent.clientX - parseInt(boxid.offsetLeft);
        var disY = oEvent.clientY - parseInt(boxid.offsetTop);

        if (name != inputName) {
            document.onmousemove = function (evt) { //实时改变目标元素obox的位置
                var oEvent = evt || event;
                boxid.style.left = oEvent.clientX - disX + 'px';
                boxid.style.top = oEvent.clientY - disY + 'px';
            }
        }
        //停止拖动
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
}

来源：CSDN

作者：DZjiuling

链接：https://blog.csdn.net/weixin_43974540/article/details/103663050