zoukankan      html  css  js  c++  java
  • JS 鼠标拖动效果实现

    相对于鼠标拖动面板跟随变动效果,废话不多说了,具体代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>鼠标拖动</title>
     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script language="JavaScript" type="text/javascript">
    var drag_=false
    var D=new Function('obj','return document.getElementById(obj);')
    var oevent=new Function('e','if (!e) e = window.event;return e')
    function Move_obj(obj){
     var x,y;
     D(obj).onmousedown=function(e){
      drag_=true;
      with(this){
       style.position="absolute";var temp1=offsetLeft;var temp2=offsetTop;
       x=oevent(e).clientX;y=oevent(e).clientY;
       document.onmousemove=function(e){
        if(!drag_)return false;
        with(this){
         style.left=temp1+oevent(e).clientX-x+"px";
         style.top=temp2+oevent(e).clientY-y+"px";
        }
       }
      }
      document.onmouseup=new Function("drag_=false");
     }
    }
    </script>
    <body>
    <div id="drag" style="background-color:#0066CC;280px;height:160px;padding:20px;border:1px #003399 solid;font-size:10.5pt;color:white" onmouseover='Move_obj("drag")'>
      <p>这个层是可以拖动的,而且还可以吸附鼠标,试试看!</p>
      <p>/</p>
    </div>
    </body>
    </html>
    
      
    
     
  • 相关阅读:
    webpack4配置详解之常用插件分享
    eslint 配置
    获取数组的随机数
    封装一个拖拽
    R语言常用语法和用法
    关于异或操作和它的算法题
    算法题:整形数组找a和b使得a+b=n
    最小生成树的一些证明
    python multiprocessing 使用
    python decorator的本质
  • 原文地址:https://www.cnblogs.com/BeyondWJsel/p/2491905.html
Copyright © 2011-2022 走看看