<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

        #img1 { position: absolute; }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            var oImg = document.getElementById('img1');

            drop(oImg);

        }

        function drop(obj) {

            obj.onmousedown = function (ev) {

                var ev = ev || event;

                var liw = ev.clientX - parseInt(getStyle(obj, 'left') == 'auto' ? '0' : getStyle(obj, 'left'));

                var lit = ev.clientY - parseInt(getStyle(obj, 'top') == 'auto' ? '0' : getStyle(obj, 'top'));

                if (obj.getCaptrue) {

                    obj.getCaptrue();

                }

                document.onmousemove = function (ev) {

                    var ev = ev || event;

                    var L = ev.clientX - liw;

                    var T = ev.clientY - lit;

                    if (L < 100) {

                        L = 0;

                    }

                    if (L > document.documentElement.clientWidth - obj.offsetWidth-100) {

                        L = (document.documentElement.clientWidth - obj.offsetWidth);

                    }

                    if (T < 100) {

                        T = 0;

                    }

                    if (T > document.documentElement.clientHeight - obj.offsetHeight - 100) {

                        T = (document.documentElement.clientHeight - obj.offsetHeight);

                    }

                    obj.style.left = L + 'px';

                    obj.style.top = T + 'px';

                }

                document.onmouseup = function () {

                    document.onmousemove = document.onmouseup = null;

                    if (obj.relaseCaptrue) {

                        obj.relaseCaptrue();

                    }

                }

                return false;

            }

        }

        function getStyle(obj, attr) {

            if (obj.currentStyle) {

                return obj.currentStyle[attr];

            } else {

                return getComputedStyle(obj, false)[attr];

            }

        }

    </script>

</head>

<body>

    <img src="data:images/btn_04.jpg" id="img1" />

    <!--<img src="data:images/btn_02.jpg" />-->

</body>

</html>

　　

js笔记---拖动元素的更多相关文章

  1. 关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题

    被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...

  2. js中迭代元素特性与DOM中的DocumentFragment类型 笔记

    JS中迭代元素特性 在需要将DOM结构序列化为XML或者HTML字符串时,多数都会涉及遍历元素的特性,这个时候attributes属性就可以派上用场. 以下代码展示了如何迭代元素的每一个特性,然后将他 ...

  3. JS拖拽元素原理及实现代码

    一.拖拽的流程动作 ①鼠标按下②鼠标移动③鼠标松开 二.拖拽流程中对应的JS事件 ①鼠标按下会触发onmousedown事件 ②鼠标移动会触发onmousemove事件 ③鼠标松开会触发onmouse ...

  4. JS实现拖动div层移动

    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screen ...

  5. 拖动元素，自由变换位置 jquery

    拖动元素,将改元素插入到某个元素前/后,并返回当前所在的位置的索引值,代码如下: <!DOCTYPE html><html lang="en"><he ...

  6. Data Visualization and D3.js 笔记(1)

    课程地址: https://classroom.udacity.com/courses/ud507 什么是数据可视化? 高效传达一个故事/概念,探索数据的pattern 通过颜色.尺寸.形式在视觉上表 ...

  7. js笔记-0

    #js笔记-0 数组: indexOf方法: Array也可以通过indexOf()来搜索一个指定的元素的位置: var arr = [10, 20, '30', 'xyz']; arr.indexO ...

  8. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  9. js改变HTML元素的值

    js改变HTML元素的值(常用,备忘) <!DOCTYPE html> <html> <body> <h1>我的第一段 JavaScript</h ...

随机推荐

  1. struts2 radio标签 单选按钮

    <s:radio name="sex" label="性别" list="#{'男':'男','女':'女'}" value=&quo ...

  2. php初探

    1.php中的连接符.可以连接多个字符串,相当于java中的+ 2.echo必须与后面的输出内容有至少一个空格 3.php编程中每个结尾都需要添加分号

  3. C++之路进阶——bzoj1455（罗马游戏）

    F.A.Qs Home Discuss ProblemSet Status Ranklist Contest ModifyUser  gryz2016 Logout 捐赠本站 Notice:由于本OJ ...

  4. collection和collections区别

    collection和collections区别 collection-->是集合类的上级接口,继承他的接口主要有set,list collections-->是针对集合类的一个帮助类,提 ...

  5. （转载）R14也称作子程序连接寄存器

    R14也称作子程序连接寄存器(Subroutine Link Register)或连接寄存器LR.当执行BL子程序调用指令时,R14中得到R15(程序计数器PC)的备份. 其他情况下,R14用作通用寄 ...

  6. （转）SQL Server 2005 中的计算字段

    在实际工作上遇到的问题: 在订单表中有某项商品是将“订购数量(Quantity)”乘以“单件价格(UnitCost)”等于该项商品的总价(Subtotal). 在数据表中有的列(以下皆改叫为“字段”) ...

  7. Tomcat上的项目部署到WebLogic上の注意事项

    1.修改web.xml: <!-- <display-name>weboutweb</display-name> --> <!-- 注释掉 display-n ...

  8. 夺命雷公狗ThinkPHP项目之----企业网站21之网站前台二级分类显示名称（TP自定义函数展示无限极分类）

    我们实现网站二级分类的显示的时候,先要考虑的是直接取出顶级栏目,控制器代码如下所示: <?php namespace Home\Controller; use Think\Controller; ...

  9. 夺命雷公狗---DEDECMS----24dedecms让网站头部分离

    我们这里来做一个让网站头部分离的工作,我们先看下index.htm的模版, 这里很明显就是用了一个div包围着而已,那么我们在模版目录下创建一个head.htm,如下所示: 然后我们再将刚才div里面 ...

  10. 夺命雷公狗---DEDECMS----9dedecms单标签

    我们这一节课开始将dedecms的标签了,dedecms里面的标签分好多个的,我们先来看下他的标签长得啥样的先: 随便点击一个修改即可见到标签了: 这里面上面的大文本框里面有标签的用法下面有参数的说明 ...