zoukankan      html  css  js  c++  java
  • 简洁的js拖拽代码

    很简单的js拖拽代码, 传入要拖拽的元素ID名字即可

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS拖动层</title>
    </head>
    <body>
    <div id="f" style="position: absolute;  216px; height: 138px; background-color: skyblue;font-size: 12px; top: 210px; left: 180px; z-index: 101; border: solid 1px blue;">
    <div id="title" style="background-color: Blue; cursor: move; height: 20px; color: #fff;font-size: 12px; padding-top: 5px; padding-left: 10px;">Title</div>
    Content
    Conten
    </div>
    <script type="text/javascript">
    
    var _fun = function(w){
        document.getElementById(w).onmousedown=function(evt){
            ev = evt || window.event;
            this.offset = { x: ev.offsetX || ev.layerX, y: ev.offsetY || ev.layerY };
            this.onmouseup = function(){ this.onmouseup=null; this.onmousemove=null; };
            this.onmousemove = function(et){ 
                et = et || window.event;
                this.style.left = (et.clientX-this.offset.x)+'px';
                this.style.top = (et.clientY-this.offset.y)+'px';
            };
        };
    };
    //传入要拖拽元素的ID名字
    _fun('f');
    
    </script>
    </body>
    </html>
  • 相关阅读:
    PeCheck
    模拟木马
    青柠网络验证
    青柠网络验证一键合成工具(exe程序和网络验证合成)
    如果想看我以前发的文章,请到下面地址查看
    星空QQ音乐下载2.0 (可下载收费音乐)
    vmp分析文章
    星空QQ群1.0模块
    青柠网络验证
    Java之IO操作总结
  • 原文地址:https://www.cnblogs.com/cpython/p/3599545.html
Copyright © 2011-2022 走看看