javascript简单拖拽效果

clientX,Y，鼠标的位置

document.documentElement.clientWidth：获取可视区域的宽度

document.documentElement.clientHeight：获取可视区域的高度

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  #div1{
   width:100px;
   height: 100px;
   background-color: red;
   position:absolute;
  }
</style>
<script type="text/javascript">
  window.οnlοad=function(){
   var oDiv=document.getElementById("div1")
   var disX=0;
   var disY=0;

   //给document添加事件防止拖拽太快跑出div(document无限大)
   document.οnmοusedοwn=function(ev){
    var oEvent=ev||event;

    disX=oEvent.clientX-oDiv.offsetLeft;
    disY=oEvent.clientY-oDiv.offsetTop;
    //clientX,Y，鼠标的位置
    document.οnmοusemοve=function(ev){

     var oEvent=ev||event;
     var l=oEvent.clientX-disX;
     var t=oEvent.clientY-disY;
     //阻止div跑出页面
     if(l<0){l=0;}
     if(t<0){t=0;}
     if(l>document.documentElement.clientWidth-oDiv.offsetWidth){l=document.documentElement.clientWidth-oDiv.offsetWidth;}
     if(t>document.documentElement.clientHeight-oDiv.offsetHeight){t=document.documentElement.clientHeight-oDiv.offsetHeight;}
     oDiv.style.left=l+'px';
     oDiv.style.top=t+'px';

    }
    document.οnmοuseup=function(){
     document.οnmοusemοve=null;
     document.οnmοuseup=null;
    };
    //防止火狐的bug
    return false;
   }
  }
</script>
</head>

<body>
  <div id="div1"></div>
</body>
</html>

转载于:https://www.cnblogs.com/nanhua097/p/6481209.html

javascript简单拖拽效果相关推荐

Javascript实现拖拽效果
我们执行拖拽操作时, 1.按住某元素 2.移动鼠标 3.移动鼠标到相应位置后松开鼠标基于以上操作,页面拖拽效果需要三个事件 onmousedown onmousemove onmouseup 在on ...
html js点击字图片下拉,JavaScript实现文字与图片拖拽效果的方法
本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: JavaScript实现文字与图片的拖拽效果 *{padding:0;margin:0;} . ...
JavaScript实现鼠标拖拽效果
JavaScript实现鼠标拖拽效果前几篇博客一直在讲鼠标的移动事件相关的效果,今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果.效果如图: HTML代码: <div id=" ...
一个用在手机上的简单js拖拽效果
http://blog.163.com/xiaoyou_000/blog/static/65067392201521664214534/ http://www.17sucai.com/pins/876 ...
怎么用javascript进行拖拽(转摘)
本文译自:http://www.webreference.com/programming/javascript/mk/column2/index.html 所有版权归原文所有由sohotx.com雪 ...
h5物体拖动_html5实现拖拽效果
在此之前,实现拖拽操作都是开发人员自定义逻辑实现的,但是HTML5提供了拖拽API ,使得拖拽操作的实现变得简单. fish.gif 拖拽 #div1 { width: 100px; height: ...
html拖拽模态框,bootstrap模态框实现拖拽效果
本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的.搞 ...
盒子拖拽效果，原生js实现
原生js实现拖拽效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

javascript简单拖拽效果

javascript简单拖拽效果相关推荐

最新文章

热门文章