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. BZOJ1858：[SCOI2010]序列操作——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=1858 lxhgww最近收到了一个01序列,序列里面包含了n个数,这些数要么是0,要么是1,现在对于 ...

  2. BZOJ1997：[HNOI2010]PLANAR——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=1997 https://www.luogu.org/problemnew/show/P3209 若能 ...

  3. 微软TTS语音引擎编程入门

    原文链接地址:http://www.jizhuomi.com/software/135.html   我们都使用过一些某某词霸的英语学习工具软件,它们大多都有朗读的功能,其实这就是利用的Windows ...

  4. nxlog以syslog方式发送日志

    1.nxlog简介 nxlog是个跨平台日志传输插件,支持linux.windows平台,支持window及linux内置的大部分系统日志及常见的web日志,支持tcp.udp.http(s)等协议传 ...

  5. Hydra—密码爆破神器

    公司邮箱系统密码复杂度规则:字母大小写.数字.特殊字符,四选三,长度8位以上.这种复杂度的密码看着是比较安全的,但因历史原因,邮箱系统开放了外网登陆权限,加之公司人数众多,必然会有少量员工把自己的密码 ...

  6. 【状压DP】【P2831】【NOIP2016D2T3】愤怒的小鸟

    传送门 Description Kiana 最近沉迷于一款神奇的游戏无法自拔. 简单来说,这款游戏是在一个平面上进行的. 有一架弹弓位于 $(0,0)$ 处,每次 Kiana 可以用它向第一象限发射一 ...

  7. Naive Operations HDU多校（线段树上线段果)

    Problem Description In a galaxy far, far away, there are two integer sequence a and b of length n.b ...

  8. ReaderWriterLockSlim 类

    今天在看Nop源码时,PluginManager中用到了ReaderWriterLockSlim类,于是简单做个笔记. ReaderWriterLockSlim 表示用于管理资源访问的锁定状态,可实现 ...

  9. HDU5852 Intersection is not allowed!

    There are K pieces on the chessboard. The size of the chessboard is N*N. The pieces are initially pl ...

  10. 最短路之spfa系列

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2544 Problem Description 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t ...