使用对象完成DIV拖拽功能，简单易用

Html

Css

利用对象实现拖拽

#div1 {width:200px; height:200px; background:yellow; position:absolute;}

if(l<0){
        l=0;
    }else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth){
        l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
    }
    if(t<0){
        t=0; 
    }else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight){
        t=document.documentElement.clientHeight-this.oDiv.offsetHeight
    }
    
    this.oDiv.style.left=l+'px';
    this.oDiv.style.top=t+'px';
};
Drag.prototype.fnUp=function (){
    document.onmousemove=null;
    document.onmouseup=null;
};

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

使用对象完成DIV拖拽功能，简单易用



代码描述：标签拖拽功能，只需要引入JS，使用即可。

使用方法如下。引入JS之后,直接new Drag 对象，传一个ID进去即可。
<script src="Drag.js"></script> <div id="div1">利用对象实现拖拽</div>
<script> window.onload = function() { new Drag("div1"); }; </script>

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

归零

相关代码

使用对象完成DIV拖拽功能，简单易用

最新