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>

  • 相关阅读:
    spring基于xml导入配置文件
    spring中bean的继承和依赖关系
    spring整合junit
    spring新注解说明
    Web微信开发工具无法输入中文?官方bug
    vue踩坑 导出new Vue.Store首字母要大写
    关于vue ui组件
    vue组件的生命周期
    Vue的指令以及组件化开发
    webpack的npm扩展使用
  • 原文地址:https://www.cnblogs.com/mylove0/p/7464842.html
Copyright © 2011-2022 走看看