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. BZOJ1040 骑士 【环套树 树形dp】

    1040: [ZJOI2008]骑士 Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 5611  Solved: 2166 [Submit][Stat ...

  2. async的基本用法

    1. async函数的基本形式 //函数声明 async function foo() {} //函数表达式 const foo = async function () {}; //对象的方法 let ...

  3. [zhuan]Dalvik 分析 - Class加载篇

    http://blog.csdn.net/zhangyun438/article/details/17192787 内容如下: Java 源代码经过编译后会生成后缀为class的文件,也即字节码文件. ...

  4. git--------------bug修复流程

    当前所有分支: master:主分支 test:测试分支 zs:开发人员分支 ls:开发人员分支 场景:zs正在开发A模块功能,线上环境产生了一个bug. zs的操作流程(当前分支为zs分支): 1. ...

  5. Tomcat免安装版+Eclipse配置

    Tomcat是目前比较流行的开源且免费的Web应用服务器,在我的电脑上第一次安装Tomcat,再经过网上教程和自己的摸索后,将这个过程 重新记录下来,以便以后如果忘记了可以随时查看. 注意:首先要明确 ...

  6. MongoDB入门（1）- MongoDB简介

    什么是MongoDB NoSQL NoSQL systems are also sometimes called "Not only SQL" to emphasize that ...

  7. 10.nginx+ffmpeg上搭建HLS切片

    1.首先介绍一下HLS协议: (1)简介 这个协议是由苹果公司提出并推广使用的,维基百科介绍如下: HTTP Live Streaming(缩写是HLS)是一个由苹果公司提出的基于HTTP的流媒体网络 ...

  8. 51Nod 1024 矩阵中不重复的元素 | 技巧 数学

    first try: set<LL> sset; int main() { LL m,n,a,b; while(~scanf("%lld%lld%lld%lld",&a ...

  9. 【Dream Counting, 2006 Dec-数数的梦】数位dp

    题意:给定两个数,问区间[A,B]中0~9分别出现了多少次.A,B<=10^18 题解:应该是最裸的数位dp吧..一开始没有记忆化tle了TAT 我们可以求出区间[0,B]的,再减去区间[0,A ...

  10. 【51NOD】独木舟

    [算法]贪心 [题解]比较经典,用l,r两个定位指针分别从左右向中间推进. #include<cstdio> #include<algorithm> #include<c ...