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>
  • 相关阅读:
    一周好文(15)
    一周好文(13)
    宏定义中的 "#" 和 "##"
    一周好文(14)
    CCRenderTexture崩溃问题分析
    C++反射机制的实现(转)
    一周好文(16)
    opengl on mac
    uthash: a hash table for C strcutures
    CC3LineNode线条变色的问题
  • 原文地址:https://www.cnblogs.com/cpython/p/3599545.html
Copyright © 2011-2022 走看看