效果：

源码：

<!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. windows 查看端口被占用进程

    查看占用63243是谁 C:\Users\Administrator>netstat -aon|findstr "63243" TCP 172.27.33.11:63243 ...

  2. 3-为什么很多 对 1e9+7(100000007)取模

    首先有很多题目的答案是很大的,然而出题人的本意也不是让选手写高精度或者Java,所以势必要让答案落在整型的范围内.那么怎么做到这一点呢,对一个很大的质数取模即可(自行思考为什么不是小数).那么如果您学 ...

  3. centos 6.5使用virtualenv指定python 2.7.x

    1. 使用现有的 python 2.6.x 安装pip rpm -ivh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8. ...

  4. Openssl ec命令

    一.简介 椭圆曲线密钥处理工具 二.语法 openssl ec [-inform PEM|DER] [-outform PEM|DER] [-in filename] [-out filename] ...

  5. 908D New Year and Arbitrary Arrangement

    传送门 分析 代码 #include<iostream> #include<cstdio> #include<cstring> #include<string ...

  6. Django框架请求生命周期

    先看一张图吧! 1.请求生命周期 - wsgi, 他就是socket服务端,用于接收用户请求并将请求进行初次封装,然后将请求交给web框架(Flask.Django) - 中间件,帮助我们对请求进行校 ...

  7. [GO]结构体成员的使用：指针变量

    package main import "fmt" func main() { type student struct { id int name string sex byte ...

  8. vSphere5.5体系结构

    1.vSphere5.5体系结构 vSphere5.5作为云集算操作系统,可以虚拟化服务器.存储.网络在内的整个IT基础架构,将这些架构转化为易于管理的虚拟化!vSphere5.5从逻辑上,可以划分为 ...

  9. Redis缓存相关

    Redis缓存服务搭建及实现数据读写 RedisHelper帮助类 /// <summary> /// Redis 帮助类文件 /// </summary> public cl ...

  10. Reporting Service服务SharePoint集成模式安装配置（6、安装Reporting services Add-in for SharePoint 外接程序）

    第五步骤 : 安装Reporting services Add-in for SharePoint 外接程序 RS 外接程序是在 SharePoint 服务器上运行用于 SharePoint 产品的 ...