javascript实现图片拖动效果并不难，主要的思路如下

1：给图片绑定监听鼠标按下对象，设置拖动属性为true

2：鼠标抬起：拖动属性为false

鼠标移动：改变坐标即可，新坐标=图片原始坐标+鼠标移动后坐标-鼠标移动前坐标

注意事项

要给图片的位置属性设为fixed或者absolute，并且要图片复制初始的left和top属性

代码如下

<!DOCTYPE html>

<html>

<head>

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

    <title>test dragging picture</title>

    <script  type="text/javascript" charset="utf-8">

    function draggingP (e) {

        //确认事件

        var e = e || window.event;

        //确认源事件

        var myElement = e.srcElement || e.target;

        //不要默认事件

        if(e.preventDefault) e.preventDefault();

        else  e.returnvalue = false;

        var mypic = document.getElementById("mypic");

        mypic['dragging']=true;//拖动属性为true

        var lef =parseInt(myElement.style.left);

        var to = parseInt(myElement.style.top);

        // alert(lef+"+"+to);

        myElement.onmouseup = function  () {

            mypic['dragging']=false;//拖动属性为false

        }

        document.onmousemove = function  (eMove) {

            var eMove = eMove || window.event;

            if(mypic['dragging']==true){//新坐标

                myElement.style.left = eMove.clientX -e.clientX  + lef+"px";

                myElement.style.top  = eMove.clientY -e.clientY + to+"px";

                return false;

            }

        }

    }

    window.onload = function  () {

        var mypic = document.getElementById("mypic");

        mypic['dragging']=false;

        if(navigator.userAgent.indexOf('MSIE')>0){//IE

            mypic.attachEvent("onmousedown",draggingP);

        }//绑定监听事件

        else{

            mypic.addEventListener("mousedown",draggingP,false);

        }

    }

     </script>

</head>

<body>

    <img src="http://www.sysu.edu.cn/favicon.ico" alt="sysu" name="mypic" id="mypic" style="position:absolute">

</body>

</html>

javascript 实现图片拖动的更多相关文章

  1. javascript完美实现图片拖动改变顺序

    在web页面中,需要改变多个元素的位置,可以通过元素拖动来实现.HTML5中加入了一个全局属性draggable,通过设置true/false来控制元素是否可拖动. 下面以图片拖动为例,用jQuery ...

  2. JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效

    <html> <head>     <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...

  3. Javascript之相册拖动管理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 前端学习 第七弹： Javascript实现图片的延迟加载

    前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img    src="" x-src="/acsascas ...

  5. JavaScript校验图片格式及大小

    <!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...

  6. JavaScript判断图片是否加载完成的三种方式

    JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...

  7. 基于javascript实现图片懒加载（亲测有效）

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

  8. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  9. Javascript 将图片的绝对路径转换为base64编码

    Javascript将图片的绝对路径转换为base64编码 我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: var i ...

随机推荐

  1. fhq_treap 学习笔记

    前言:昨天写NOIp2017队列,写+调辗转了3h+,不知道怎么的,就点进了一个神仙的链接,便在今日学习了神仙的fhq_treap. 简介:fhq_treap功能强大,支持splay支持的所有操作,代 ...

  2. bzoj3302&bzoj2447&bzoj2103（树的重心）

    三倍的幸福! 暴力的做法就是枚举每一条边断开,选的两个点就是左右两棵树的重心. 可以发现找重心的时候一定是往权和大的子树找的,需要维护一个点的最大和次大子树,因为最大子树可能被割掉了,实际效率为O(N ...

  3. 【简单算法】22.删除链表的倒数第N个节点

    题目: 给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: ->->->->, 和 n = . 当删除了倒数第二个节点后,链表变为 -& ...

  4. [zhuan]tomcat环境配置

    http://jingyan.baidu.com/article/8065f87fcc0f182330249841.html 一.安装JDK和Tomcat 1,安装JDK:直接运行jdk-7-wind ...

  5. 用户登录拦截器查询到登录用户后如何将用户信息传递到后面的Controller

    taotao创建订单代码中之前忘了加入用户信息,那么加上呢? 分析:用户创建订单的时候,我们会强制要求用户先登录,也就是说,创建订单的Controller执行时,一定是用户已经登录了的,而用户只要登录 ...

  6. 题解【luoguP1351 NOIp提高组2014 联合权值】

    题目链接 题意:给定一个无根树,每个点有一个权值.若两个点 \(i,j\) 之间距离为\(2\),则有联合权值 \(w_i \times w_j\).求所有的联合权值的和与最大值 分析: 暴力求,每个 ...

  7. HDU3251 最大流（最小割）

    Being a Hero Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...

  8. ZooKeeper管理员指南——部署与管理ZooKeeper

    1.部署 本章节主要讲述如何部署ZooKeeper,包括以下三部分的内容: 系统环境 集群模式的配置 单机模式的配置 系统环境和集群模式配置这两节内容大体讲述了如何部署一个能够用于生产环境的ZK集群. ...

  9. Update SSM agent to each EC2 via Bat and bash script

    1. copy the instance id from aws console to file 2. remove the , from file sed -i 's/,//g' file 3. g ...

  10. 洛谷 2957 [USACO09OCT]谷仓里的回声Barn Echoes

    题目描述 The cows enjoy mooing at the barn because their moos echo back, although sometimes not complete ...