拖拽事件Dom事件

最新推荐文章于 2023-07-25 09:58:47 发布

clearupshallow

最新推荐文章于 2023-07-25 09:58:47 发布

阅读量292

点赞数

文章标签：函数 dom 拖拽事件

本文链接：https://blog.csdn.net/clearupshallow/article/details/53432720

版权

这篇博客探讨了DOM中的拖拽事件，包括如何阻止右键操作，以实现更定制化的用户交互体验。

摘要由CSDN通过智能技术生成

拖拽事件

onload = function(){

    var div = document.getElementsByTagName("div")[0];
    div.onmousedown = function(evt){
        var event = evt||window.event;
        //获得当前鼠标针对div的偏移量
        var offsetX = event.offsetX;
        var offsetY = event.offsetY;
        document.onmousemove = function(evt){
            var event = evt||window.event;
            div.style.left = (event.clientX+document.documentElement.scrollLeft-offsetX)+"px";
            div.style.top = (event.clientY+document.documentElement.scrollTop-offsetY)+"px";
        }

    }
    div.onmouseup = function(){
        //alert("111");
        document.onmousemove = null;
    }
}

阻止右键

document.oncontextnu=function(){
     var event=evt||window.event;
     event.preventDefault?event.preventDefault():event.returnValue=false;

 }





onload=function(){
     var box=document.getElementById("box");
     //创建一个保存坐标的数组
     var positionArr=[];
     var p=new Object();
     p.x=box.style.left;
     p.y=box.style.top;
     positionArr.push(p);//保存的是开始位置
     box.onmousedown=function=function(evt){
         var event=getEvent(evt);
         var offsetX=event.offsetX;
         var offsetY=event.offsetY;
         document.onmousemove=function(evt){
             var event=getEvent(evt);
             box.style.left=(event.clientX+document.documentElement.scrollLeft-offsetX)+"px";
             box.style.left=(event.clientY+document.documentElement.scrollTop-offsetY)+"px";
             //把拖动过程中坐标保存下来
             var obj =new Object();
             obj.x=box.style.left;
             obj.y=box.style.top;
             positionArr.push(obj);
         }

     }
     box.onmouseup=function(){

         document.onmousemove=null;
     }
     document.getElementById("review").onclick=function(){
         //得到数组的最大坐标
         var i=positionArr.length-1;
         var id =setInterval(function){
             var position=positionArr[i];
             //alert(position.x"-"+position.y);

             if(i<0){
                 clearInterval(id);
             }

             box.style.left=position.x;
             box.style.top=position.y;



             -i;
         },50);
     }

 }
 function getEvent(evt){
     return evt||window.event;
 }