zoukankan      html  css  js  c++  java
  • 图片拖拽原生js

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>拖拽原生js</title>
     <style>
          #box1{
          100px;
         height: 100px;
         background-color: #ffff00;
         position: absolute;
         }

    </style>
    <script>
         window.onload=function(){
         var oDiv=document.getElementById("box1");

     //onmousedown:鼠标按下 选择元素
     //onmousemove:移动元素
     //onmouseup:鼠标释放 释放元素
         oDiv.onmousedown=function(ev){
         var oEvent=ev||event;
         var disX=oEvent.clientX-oDiv.offsetLeft;
         //鼠标在div中的左边的的距离=鼠标的横坐标-div的left值
         var disY=oEvent.clientY-oDiv.offsetTop;

         document.onmousemove=function(ev){
         var oEvent=ev||event;
         oDiv.style.left=oEvent.clientX-disX+'px';
         oDiv.style.top=oEvent.clientY-disY+'px';
         };
         document.onmouseup=function(){
         document.onmousemove=null;
         document.onmouseup=null;
    //在释放之后,下次操作要全部清空再操作,而不是再move的基础上重复操作
    // document.onmousedown=null;
    }
    }

    }
    </script>
    </head>
    <body>
    <div id="box1"></div>
    </body>
    </html>

  • 相关阅读:
    ASP.NET(C#)——唯一订单号
    Oracle——备份与还原
    ASP.NET(C#)——日期函数
    数据安全——数据安全标准
    文件内容的追加
    文件的读取
    创建文件,写文件
    遍历文件改进
    遍历文件夹
    递归方法求前n项和
  • 原文地址:https://www.cnblogs.com/mylove0/p/7464842.html
Copyright © 2011-2022 走看看