效果：

源码：

<!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. Logger Rate Limiter 十秒限时计数器

    ［抄题］: Design a logger system that receive stream of messages along with its timestamps, each message ...

  2. 关于java是值传递还是引用传递

    一.概念 实际上对这两种传递方式,知乎上有个回答说得很好: 值传递和引用传递,属于函数调用时参数的求值策略(Evaluation Strategy),这是对调用函数时,求值和传值的方式的描述,而非传递 ...

  3. 兼容低于IE9不支持html5标签的元素的方法

    方法一: <!--[if lt IE9]> <script>    (function() {     if (!      /*@cc_on!@*/     0) retur ...

  4. Creating Custom UITableViewCells with NIB files

    Maksim Pecherskiy 13 November 2012 Well this sucks. Apparently these days you can only use the Inter ...

  5. 设计模式23：Visitor 访问者模式（行为型模式）

    Visitor 访问者模式(行为型模式) 动机(Motivation)在软件构造过程中,由于需求的改变,某些类层次结构中常常需要增加新的行为(方法),如果直接在基类中做这样的修改,将会给子类带来繁重的 ...

  6. Android 文字垂直居中

    android中自定义控件,自己绘制文字canvas.drawText()的时候,怎样才能让文字垂直居中那? drawText()的方法说明 也就是使用paint画笔在(X,Y)处进行绘制,X为横向坐 ...

  7. 【重要】拷贝NIOS II工程后，修改工程前必须要做的10件事

    1.拷贝现有工程到新的目录2.打开Quartus II工程文件3.打开NIOS II EDS软件4.切换工作空间到当前的新工程根目录5.在NIOS II EDS软件中将已有的软件工程先删除掉(不要勾选 ...

  8. CF869C The Intriguing Obsession(组合数学瞎搞，O(n)莫名过)

    — This is not playing but duty as allies of justice, Nii-chan! — Not allies but justice itself, Onii ...

  9. static 静态类

    C# 编译器对静态类进行了如下限制. 1. 静态类必须直接从System.Object派生,从其他任何基类生都没有意义,继承只适用于对象,而你不能创建静态类的实例. 2. 静态类不能实现任何接口,这是 ...

  10. ubuntu eclipse 集成pyDev

    Eclipse help 选择安装新软件 添加一个pydev 名字随意.地址是 http://pydev.org/updates. 下面的列表会出现很多PyDev For Eclipse 选择版本最高 ...