效果：

源码：

<!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. 封装request.get_params批量取值

    @json_request_validator(post_schema) 装饰器 from functools import wraps from schema import SchemaError ...

  2. ubuntu创建wifi热点plasma-nm

    第一步:安装 plasma-nm sudo apt-get install plasma-nm 第二步:启动程序 可以使用 Alt+F2 后,搜索 kde-nm-connection-editor 也 ...

  3. C# JSON使用过程中开发的小工具

    我在用JSON的过程中,经常要去看一下JSON的结构,而JSON串大不部分时候都是未格式化的数据,一次我不得不用一些网页上的在线解析和格式化工具来进行格式化查看,但是这些网页有时候并不好用:因此就结合 ...

  4. Introduction mybatis

    项目地址 https://github.com/mybatis/mybatis-3 英文官网 http://mybatis.github.io/mybatis-3/ 中文官网 http://mybat ...

  5. JS Closure 闭包

    /*一.变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域.变量的作用域无非就是两种:全局变量和局部变量.Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. ...

  6. How to count the number of threads in a process on Linux

    If you want to see the number of threads per process in Linux environments, there are several ways t ...

  7. 7个常见Javascript框架介绍

    设计开发中的“框架”指一套包含工具.函数库.约定,以及尝试从常用任务中抽象出可以复用的通用模块,目标是使设计师和开发人员把重点放在任务项目所特有的方面,避免重复开发.通俗的讲,框架就是最常用的java ...

  8. [转载].NET商业软件源码保护

    列举工作以来遇到的各种类型的软件所采用的代码保护技术,只讲原理不涉及技术细节实现,以避免产生法律问题.有些朋友说直接把代码放在Github开源下载,开源可以促进技术交流与进步,然而值钱的代码都积压在硬 ...

  9. Redis 七月小说网的爬虫缓存设计

    一.爬虫策略 1.主服务器先根据spider.all set排重,再 lpush request_url 到spider.wait List中,并且 sadd request_url 到 set中: ...

  10. 转载C#中Trim()、TrimStart()、TrimEnd()的用法

    C#中Trim().TrimStart().TrimEnd()的用法:    这三个方法用于删除字符串头尾出现的某些字符.Trim()删除字符串头部及尾部出现的空格,删除的过程为从外到内,直到碰到一个 ...