zoukankan      html  css  js  c++  java
  • 拖拽事件

    <!DOCTYPE html>
    <html>
     <head>
     <meta charset="UTF-8">
     <title>拖拽事件</title>
     <style type="text/css">
      #div{
        width: 200px;
        height: 200px;
        background: green;
        position: absolute;
      }
    #div2{    width: 200px;   height: 200px;   background: gold;   position: absolute;   top: 200px;   left: 200px; }
    </style>
    </head>
    <body> <div id="div"></div> <div id="div2"></div> <script>
    window.onload=function(){ var div=document.getElementById("div"); div.onmousedown=function(ev){ var e=window.event || ev; //如果存在window.event那么e等于window.event,如果不存在window.event,那么e等于ev //var Mydiv=document.getElementById("div"); //获取到鼠标点击的位置距离div左侧和顶部边框的距离; var oX=e.clientX-div.offsetLeft; var oY=e.clientY-div.offsetTop; //当鼠标移动,把鼠标的偏移量付给div document.onmousemove=function(ev){ //计算出鼠标在XY方向上移动的偏移量,把这个偏移量加给DIV的左边距和上边距,div就会跟着移动 var e=window.event|| ev; div.style.left=e.clientX-oX+"px"; div.style.top=e.clientY-oY+"px"; } //当鼠标按键抬起,清除移动事件 document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } var div2=document.getElementById("div2"); div2.onmousedown=function(ev){ var e=window.event || ev; //var Mydiv=document.getElementById("div"); //获取到鼠标点击的位置距离div左侧和顶部边框的距离; var oX=e.clientX-div2.offsetLeft; var oY=e.clientY-div2.offsetTop; //当鼠标移动,把鼠标的偏移量付给div document.onmousemove=function(ev){ //计算出鼠标在XY方向上移动的偏移量,把这个偏移量加给DIV的左边距和上边距,div就会跟着移动 var e=window.event|| ev; div2.style.left=e.clientX-oX+"px"; div2.style.top=e.clientY-oY+"px"; } //当鼠标按键抬起,清除移动事件 document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } }
    </script>
    </body>
    </html>

  • 相关阅读:
    发送短信/邮件/打电话 code(转)
    如何学习算法
    堆和栈的区别
    2010 baidu笔试
    关于TableView中图片的延时加载(转)
    sqlite + UITableView 实现iPhone大数据浏览
    2010 Google中国笔试试题
    海量数据处理方法总结(转)
    IPhone WebApp 设计开发工具与资源(转)
    DynamicDataSet
  • 原文地址:https://www.cnblogs.com/dalaotan/p/7489737.html
Copyright © 2011-2022 走看看