zoukankan      html  css  js  c++  java
  • javascript 拖动效果

    1.

    View Code
    <!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>
    <script type="text/javascript">
    window.onload
    = function () {
    var obj
    = g("divFile1");
    var padx, pady, pad2x, pad2y;
    obj.onmousedown
    = function () {
    var e
    = window.event;
    this.style.cursor = "move";
    this.style.zIndex = 10000;
    padx
    = e.clientX - this.offsetLeft;
    pady
    = e.clientY - this.offsetTop;
    }
    obj.onmousemove
    = function () {
    if (!padx) {
    return;
    }
    var e
    = window.event;
    this.style.left = e.clientX - padx - pad2x - g("divWrap").offsetLeft;
    this.style.top = e.clientY - pady - pad2y - g("divWrap").offsetTop;
    }
    obj.onmouseup
    = function () {
    this.style.cursor = "normal";
    this.style.zIndex = 0;
    padx
    = undefined;
    }
    }
    function g(id) {
    return document.getElementById(id);
    }
    </script>
    </head>
    <body style="margin:0; padding:0">

    <div id="divWrap" style="background-color:#aabbff; height: 299px; 376px; margin:100px;">

    <div id="divFile1" style="background-color:Aqua; position:relative; 54px; line-height: 44px; text-align:center;">文件1</div>

    <div id="divCopy"

    style
    ="background-color:Aqua; 54px; line-height: 44px; text-align:center; position:absolute; top: 184px; left: 377px;">复制</div>
    <div id="divDelete"

    style
    ="background-color:Aqua; 54px; line-height: 44px; text-align:center;position:absolute; top: 304px; left: 382px;">删除</div>
    </div>
    </body>
    </html>

    2.

    View Code
    <!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>
    <script type="text/javascript">
    window.onload
    = function () {
    var obj
    = g("divFile1");
    var padx, pady, maxx, minx, maxy, miny;
    obj.onmousedown
    = function () {
    var e
    = window.event;
    this.style.cursor = "move";
    this.style.zIndex = 10000;
    padx
    = e.clientX - this.offsetLeft;
    pady
    = e.clientY - this.offsetTop;
    //最大和最小的拖动点
    minx = g("divWrap").offsetLeft + padx;
    maxx
    = g("divWrap").offsetLeft + g("divWrap").offsetWidth - (this.offsetWidth - padx);
    miny
    = g("divWrap").offsetTop + pady;
    maxy
    = g("divWrap").offsetTop + g("divWrap").offsetHeight - (this.offsetHeight - pady);
    this.setCapture();

    obj.onmousemove
    = function () {
    var e
    = window.event;
    var ex
    = e.clientX;
    var ey
    = e.clientY;

    //不能拖出边界
    if (ex > maxx) {
    ex
    = maxx;
    }
    else if (ex < minx) {
    ex
    = minx;
    }
    if (ey > maxy) {
    ey
    = maxy;
    }
    else if (ey < miny) {
    ey
    = miny;
    }

    var x
    = ex - padx - g("divWrap").offsetLeft;
    var y
    = ey - pady - g("divWrap").offsetTop;

    this.style.left = x;
    this.style.top = y;
    }
    obj.onmouseup
    = function () {
    this.style.cursor = "normal";
    this.style.zIndex = 0;
    this.releaseCapture();
    obj.onmousemove
    = null;
    }
    }
    }
    function g(id){
    return document.getElementById(id);
    }
    </script>
    </head>
    <body style="margin:0; padding:0">

    <div id="divWrap" style="background-color:#aabbff; height: 299px; 376px; margin:100px;">

    <div id="divFile1" style="background-color:Aqua; position:relative; 54px; line-height: 44px; text-align:center;">文件1</div>

    <div id="divCopy"

    style
    ="background-color:Aqua; 54px; line-height: 44px; text-align:center; position:absolute; top: 184px; left: 377px;">复制</div>
    <div id="divDelete"

    style
    ="background-color:Aqua; 54px; line-height: 44px; text-align:center;position:absolute; top: 304px; left: 382px;">删除</div>
    </div>
    </body>
    </html>

  • 相关阅读:
    AccessControlAllowOrigin 跨域设置多域名
    C#基于LibUsbDotNet实现USB通信(一)
    移动端设置行高等于高度的时候文本不居中???
    阿里云OSS设置跨域访问还是不行。
    没错,就是AccessControlAllowOrigin,跨域
    移动端 lineheight 文字不居中问题解决方案
    Chromium.org team 改进vs编译速度的一些建议
    isapi x86 在win7x64下的安装问题
    Entity Framwork one to one problem
    Google Talk使用技巧
  • 原文地址:https://www.cnblogs.com/cnbwang/p/2024928.html
Copyright © 2011-2022 走看看