首页 > 代码库 > javascript拖动div

javascript拖动div

2024-08-04 03:41:12   220人阅读

 

div拖动代码，在用此代码之前，你可能需要将你需要拖动的元素style设置position: absolute;

#textareaSavaDiv{
    position: absolute; 
    right:50px;
    width:300px;
    height:300px;
}

html

<div id="textareaSavaDiv">
     <input type="text" id="username"/></div>

　　

纯JS拖动div代码

<script>  var rDrag = {    o: null,    init: function(o) {        o.onmousedown = this.start;    },    start: function(e) {        var o;        e = rDrag.fixEvent(e);        e.preventDefault && e.preventDefault();        rDrag.o = o = this;        o.x = e.clientX - rDrag.o.offsetLeft;        o.y = e.clientY - rDrag.o.offsetTop;        document.onmousemove = rDrag.move;        document.onmouseup = rDrag.end;    },    move: function(e) {        e = rDrag.fixEvent(e);        var oLeft, oTop;        oLeft = e.clientX - rDrag.o.x;        oTop = e.clientY - rDrag.o.y;        rDrag.o.style.left = oLeft + ‘px‘;        rDrag.o.style.top = oTop + ‘px‘;    },    end: function(e) {        e = rDrag.fixEvent(e);        rDrag.o = document.onmousemove = document.onmouseup = null;    },    fixEvent: function(e) {        if (!e) {            e = window.event;            e.target = e.srcElement;            e.layerX = e.offsetX;            e.layerY = e.offsetY;        }        return e;    }    };window.onload = function() {    var obj = document.getElementById(‘textareaSavaDiv‘);    rDrag.init(obj);};</script>

以上代码就可以实现拖动div的效果

但是，如果你的div里面有输入框或者需要操作的元素的时候，就会无法输入或者无效果原因是你使用了移动层，因为层的覆盖，把输入框给挡住了

想要实现可以div里面元素有效需要js获取焦点

在拖动的时候让输入框ID获取焦点

window.onload = function() {    var obj = document.getElementById(‘textareaSavaDiv‘);
    document.getElementById("username").focus();
    rDrag.init(obj); 
};

 

javascript拖动div


联系
我们