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. POJ1741：Tree——题解+树分治简要讲解

    http://poj.org/problem?id=1741 题目大意:给一棵树,求点对间距离<=k的个数. ———————————————————— 以这道题为例记录一下对于树分治的理解. 树 ...

  2. 从零开始学Linux系统（二）之基本操作指令

    ifconfigping ip地址帮助:ping -t ip地址ping -c 次数 ip地址ping -s 包的大小关机重启:shutdown -h now reboot清屏:clear  == C ...

  3. 【DP】【P1586】四方定理

    传送门 Description Input 第一行为一个整数T代表数据组数,之后T行每行一个数n代表要被分解的数 Output 对于每个n输出一行,为方案个数 Sample Input Sample ...

  4. 《python核心编程》--读书笔记 第21章 数据库编程

    准备:今天拿笔记本装了mysql,这样就能在不同地方用其他电脑远程访问同一个数据库了. python安装MySQLdb模块:http://www.codegood.com/downloads. 21. ...

  5. 再来说一说sudo

    app        ALL = (ALL:ALL) ALL eric.zhan ALL = (app : app) ALLDefaults:eric.zhan runas_default=app 如 ...

  6. 南阳ACM 题目275：队花的烦恼一 Java版

    队花的烦恼一 时间限制:3000 ms  |  内存限制:65535 KB 难度:1 描述 ACM队的队花C小+经常抱怨:"C语言中的格式输出中有十六.十.八进制输出,然而却没有二进制输出, ...

  7. Epoll模型讲解

    1.流模型 首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行I/O操作的内核对象. 不管是文件,还是套接字,还是管道,我们都可以把他们看作流. 之后我们来讨论I/O的操作, ...

  8. 求逆元的两种方法+求逆元的O(n)递推算法

    到国庆假期都是复习阶段..所以把一些东西整理重温一下. gcd(a,p)=1,ax≡1(%p),则x为a的逆元.注意前提:gcd(a,p)=1; 方法一:拓展欧几里得 gcd(a,p)=1,ax≡1( ...

  9. Linux 中使用 dd 测试磁盘性能

    翻译自 : Linux I/O Performance Tests using dd 基本说明 dd 可以用来做简单的低级别复制文件. 这样做, 一般都是可一直直接访问设备文件. 需要说明的是, 错误 ...

  10. Apache服务器添加网站目录不在根目录的情况

    Apache原本根目录: /var/www 需要添加的新的Apache网站目录 /home/*** 在Apache服务器虚拟配置下添加一个站点 <VirtualHost *:> Serve ...