<!DOCTYPE html>

<html>

<head>

    <meta charset="utf8">

    <title>js拖拽效果</title>

    <style type="text/css">

    #div1 {

        width : 200px;

        height: 200px;

        position: absolute;

        background: #99dd33;

        cursor: move;

    }

    </style>

</head>

<body>

    <div id="div1"></div>

</body>

<script type="text/javascript">

    window.onload = function() {

        var disX = disY = 0;                         // 鼠标距离div的左距离和上距离

        var div1 = document.getElementById("div1");  // 得到div1对象

        // 鼠标按下div1时

        div1.onmousedown = function(e) {

            var evnt = e || event;                   // 得到鼠标事件

            disX = evnt.clientX - div1.offsetLeft;   // 鼠标横坐标 - div1的left

            disY = evnt.clientY - div1.offsetTop;    // 鼠标纵坐标 - div1的top

            // 鼠标移动时

            document.onmousemove = function(e) {

                var evnt = e || event;

                var x = evnt.clientX - disX;

                var y = evnt.clientY - disY;

                var window_width  = document.documentElement.clientWidth  - div1.offsetWidth;

                var window_height = document.documentElement.clientHeight - div1.offsetHeight;

                x = ( x < 0 ) ? 0 : x;                          // 当div1到窗口最左边时

                x = ( x > window_width ) ? window_width : x;    // 当div1到窗口最右边时

                y = ( y < 0 ) ? 0 : y;                          // 当div1到窗口最上边时

                y = ( y > window_height ) ? window_height : y;  // 当div1到窗口最下边时

                div1.style.left = x + "px";

                div1.style.top  = y + "px";

            };

            // 鼠标抬起时

            document.onmouseup = function() {

                document.onmousemove =null;

                document.onmouup = null;

            };

            return false;

        };

    };

</script>

</html>

Js 拖动效果的更多相关文章

  1. js 实现win7任务栏拖动效果

    前言 在某个时刻, 我认识了一个朋友. 此人在我的教唆下, 踏上了js的不归路. 前天他问我, Win7任务栏拖动效果怎么实现. 我随口就跟他说, 这简单的一逼. 在我一晚上的折腾之后, 一份潦草的代 ...

  2. HTML 通过js实现div的拖动效果

    最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...

  3. js实现一个可以兼容PC端和移动端的div拖动效果

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...

  4. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  5. jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...

  6. Web的鼠标拖动效果

    以前写过一个拖动效果的Demo,拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的.计算效率差,而且效果不好.所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果. 其实顺滑的 ...

  7. Web组件流畅拖动效果

    拖动效果,可以形象的帮助用户处理一些问题,比如Windows删除文件,只需将文件拖动至回收站即可.比起右键显得更形象,我觉得更好玩一点^_^.当然,在其他许多方面,其实也有用到拖动效果,只是他们不是那 ...

  8. bootstrap使用之多个弹窗和拖动效果[开发篇]

    有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧! 这里,我们不使用静态打开的的方式,low...,1.添加一个a链接 触 ...

  9. 一行代码轻松实现拖动效果[JQuery]

    写JS实现拖动需要一大堆不便维护的代码,实属麻烦,Google了大半天,发现了一个优秀的Jquery插件EasyDrag,只需要一行代码便可轻松在主流浏览器上 实现拖动效果.   $(document ...

随机推荐

  1. Ubuntu ssh服务安装

    在使用xshell连接ubuntu虚拟机时,提示 Could not connect to '192.168.0.106' (port 22): Connection failed. 在主机使用pin ...

  2. php 获取数组第一个元素 以及最后一个元素 && 最后一个元素的键名

    1. current() 函数返回数组中的当前元素的值. 每个数组中都有一个内部的指针指向它的"当前"元素,初始指向插入到数组中的第一个元素. end() - 将内部指针指向数组中 ...

  3. 前端页面使用 Json对象与Json字符串之间的互相转换

    前言 在前端页面很多时候都会用到Json这种格式的数据,最近没有前端,后端的我也要什么都要搞,对于Json对象与Json字符串之间的转换终于摸清楚了几种方式,归纳如下! 一:Json对象转换为json ...

  4. DotNetBar grid筛选 按时间筛选

    PatientDiaryPanel.Columns["RECORDDATE"].FilterExpr = string.Format("date(RECORDDATE) ...

  5. Map与Tuple

    一:Map 1.创建一个不可变的map 2.创建一个可变的map 3.创建一个空的map 4.可变map添加一个元素 5.查看一个元素和修改一个元素 6.可变map删除元素 7.不可变map添加一个元 ...

  6. 【Html 学习笔记】第一节——基础标签

    前端技术一直是欠缺,从今天开始以后打算每天抽出一部分的时间进行学习,尽快把这方面补上来.感觉测试人员还是需要一些前端技能的,我这里学习地址是:W3CSchool 废话不多说了,直接在文本编辑器中编辑好 ...

  7. Preference Screen 首选项

     设置Preference Screen (res\xml\userpreferences.xml) <?xml version="1.0" encoding="u ...

  8. MYSQL提权总结

    最近在测试一个项目,遇到了MYSQL数据库,想尽办法提权,最终都没有成功,很是郁闷,可能是自己很久没有研究过提权导致的吧,总结一下MYSQL提权的各种姿势吧,权当复习了.关于mysql提权的方法也就那 ...

  9. Java线程：线程的同步-同步方法

    Java线程:线程的同步-同步方法   线程的同步是保证多线程安全访问竞争资源的一种手段. 线程的同步是Java多线程编程的难点,往往开发者搞不清楚什么是竞争资源.什么时候需要考虑同步,怎么同步等等问 ...

  10. 关于checkbox的一些问题（全选，反选，以及取值）

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...