效果：

源码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>速表拖拽效果实现</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .toolbar{

            height: 30px;

            text-align: left;

            padding-left: 20px;

            background: #036663;

            line-height: 30px;

            color: #fff;

        }

        .regist{

            width: 410px;

            height: 310px;

            margin: 200px auto;

            border:5px solid #eee;

            box-shadow:2px 2px 2px 2px #666;

        }

        .rt{

            height: 26px;

            background: #7C9299;

            color: #fff;

            line-height: 26px;

            cursor: move;

        }

        .rts{

            float: right;

        }

    </style>

</head>

<body>

<div class="toolbar">注册信息</div>

<div class="regist" id="regist">

    <div class="rt" id="rt">

        <span>注册信息(可以拖拽)</span>

        <span class="rts">【关闭】</span>

    </div>

</div>

<script>

    var regist = document.getElementById("regist");

    var rt = document.getElementById("rt");

    var x = 0,y = 0;

    rt.onmousedown = function(event){

        var event = event || window.event;

        x = event.clientX -  regist.offsetLeft;

        y = event.clientY - regist.offsetTop + 30;//加三十是因为顶部工具条占了30，而regist的没有父亲，所以他是以body为定位点，所以。。。

        document.onmousemove = function(event){

            var event = event || window.event;

            regist.style.marginLeft = event.clientX - x +"px";

            regist.style.marginTop = event.clientY - y +"px";

            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

        }

        document.onmouseup = function(){

            document.onmousemove = null;

        }

    }

</script>

</body>

</html>

js 鼠标拖拽效果实现的更多相关文章

  1. JS实现拖拽效果

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  2. 用JavaScript实现div的鼠标拖拽效果

    实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...

  3. js鼠标拖拽

    html <div id="box"> </div> css ;;} #box{width:200px;height:200px;background:cy ...

  4. JavaScript：鼠标拖拽效果

    (之前的那个模板方法模式实在没搞懂...等几天再去研究8) 预览效果: 限制拖动范围在视口内.调整窗口时自动居中... <!DOCTYPE html> <html lang=&quo ...

  5. js 鼠标拖拽元素

    基础知识 event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event. ...

  6. 原生js实现拖拽效果

    面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...

  7. 【转】JS容器拖拽效果，并通过cookie保存拖拽各容器的所在位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JS移动客户端--触屏滑动事件及js手机拖拽效果

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  9. Jquery实现鼠标拖拽效果

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

随机推荐

  1. 监控web接口和添加触发器

    1: 以监控百度接口为例子: www.baidu.com1: 打开 2: 过滤ss0.bdstatic.com 3: 选择两个url进行监控 https://ss0.bdstatic.com/5aV1 ...

  2. [Plan]计划

    1. scala 2. kafka 1. lua 2. openResty 1. 日志收集 - python 2. 代码生成 3. 权限系统

  3. QT中自定义系统托盘的实现—c++语言为例

    将要介绍的是:QT中自定义系统托盘(systemtray)的一个Demo,希望能帮需要的读者快速上手. 前提假设是诸位已经知道QT中的signals .slot以及资源文件,所以关于这些不会再累述. ...

  4. GDB调试教程

    简介 GDB(GNU debugger)是GNU开源组织发布的一个强大的UNIX下的程序调试工具.可以使用它通过命令行的方式调试程序.它使你能在程序运行时观察程序的内部结构和内存的使用情况.你也可以使 ...

  5. KNN算法python实现

    1 KNN 算法 knn,k-NearestNeighbor,即寻找与点最近的k个点. 2 KNN numpy实现 效果: k=1 k=2 3 numpy 广播,聚合操作. 这里求距离函数,求某点和集 ...

  6. transition与animation的区别

    transition需要事件触发,animation可以直接自动触发,而且功能上更为强大,包括可以设置不同时间段的动画规则,还有状态的控制,事件等等.

  7. eclipse netbeans 代码模板

    eclipse  代码模板  插入slf4j ${:import(org.slf4j.Logger,org.slf4j.LoggerFactory)} private static final Log ...

  8. Qt资源整理ING

    QCustomPlot:图表库,开源, 链接地址http://www.qcustomplot.com/index.php/download 一些Qt的开发库:http://qt-project.org ...

  9. HDU 4756 Install Air Conditioning (MST+树形DP)

    题意:n-1个宿舍,1个供电站,n个位置每两个位置都有边相连,其中有一条边不能连,求n个位置连通的最小花费的最大值. 析:因为要连通,还要权值最小,所以就是MST了,然后就是改变一条边,然后去找出改变 ...

  10. 编写高质量代码改善C#程序的157个建议——建议138：事件和委托变量使用动词或形容词短语命名

    建议138:事件和委托变量使用动词或形容词短语命名 事件和委托使用场景是调用某个方法,只不过这个方法由调用者赋值.这决定了对应的变量应该以动词或形容词短语命名. 关于事件和委托变量妥当的命名示例如下: ...