js拖拽

最新推荐文章于 2024-12-16 07:53:36 发布

zouluyifang

最新推荐文章于 2024-12-16 07:53:36 发布

阅读量494

点赞数

分类专栏： js

js 专栏收录该内容

5 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.move{cursor:move;    position:absolute;    width:100px;    height:100px;    background:green;-moz-user-select:none;/*火狐禁止选中*/}
</style>
<script language="javascript">
var X0,Y0,eX0,eY0;
var dragAble=false;
var dragObj; 
var ie = (document.all) ? true : false;//是否为IE
  
function dragStart(e){//现在参数e在IE里也是是直接可以供函数使用的，比如第16行。
    var oDragHandle;
    if(ie){
        oDragHandle = e.srcElement;
    }else{
        oDragHandle = e.target;
    }    
    if(oDragHandle.className=='move') 
    {
        dragObj=oDragHandle;
        eX0= e.clientX;
        eY0= e.clientY;
        X0=parseInt(dragObj.style.left+0);    
        Y0=parseInt(dragObj.style.top+0);
        dragAble=true;
    }
} 
//拖拽 
function drag(e){
    if(dragAble)
    {
        var eX1= e.clientX;
        var eY1= e.clientY;            
        dragObj.style.left=X0+eX1-eX0+"px";
        dragObj.style.top=Y0+eY1-eY0+"px";
    }
} 
//停止拖拽 
function dragEnd(){
    dragAble=false;
} 
//事件监听浏览器兼容 
function addListener(element,eName,fn){
    if(ie){// ie     
        element.attachEvent("on"+eName,fn);
    }else {// firefox  , w3c
        element.addEventListener(eName,fn,false);
    }    
} 
  
//添加事件监听 
window.onload = function(){
    addListener(document,"mousedown",dragStart);//鼠标按下开始拖拽
    addListener(document,"mousemove",drag);//拖拽
    addListener(document,"mouseup",dragEnd);//弹起停止拖拽    
} 
//注：添加了事件监听之后，IE里也可以像火狐里那样直接拿事件对象当函数的参数来用了，不必再window.event。
//但是不大清楚这是为什么，或者是说我还有什么地方理解错了，求交流。QQ：1140215489
</script>
</head>
  
<body>
<div class="move"><!--<br/>如果样式规定里此div可选，并且没有内容的话，火狐会有bug--></div>
<div class="move" style="background:blue;left:200px"></div>
</body>
</html>