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. POJ2406：Power Strings——题解

    http://poj.org/problem?id=2406 就是给一个串,求其循环节的个数. 稍微想一下就知道,KMP中nxt数组记录了所有可与前面匹配的位置. 那么如果我们的循环节长度为k,有n个 ...

  2. 51NOD 1773：A国的贸易——题解

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1773 参考1:FWT讲解 https://www.cnblogs.com ...

  3. Manacher以及回文树算法学习

    Manacher以及回文树算法学习 一.Manacher 关于\(Manacher\),这篇博客 讲的很清楚. 大致总结一下 为了将长度为奇数的回文串和长度为偶数的回文串一起考虑,需要在原字符串中插入 ...

  4. BZOJ3542 DZY Loves March 【map + 线段树】

    题目链接 BZOJ3542 题解 线段树裸题,,对每一行每一列开线段树 由于坐标很大,用\(map\)维护根下标 化一下式子,只用维护区间和,区间平方和,区间存在的个数 #include<alg ...

  5. POJ.1797 Heavy Transportation (Dijkstra变形)

    POJ.1797 Heavy Transportation (Dijkstra变形) 题意分析 给出n个点,m条边的城市网络,其中 x y d 代表由x到y(或由y到x)的公路所能承受的最大重量为d, ...

  6. BAT-Python面试题

    Python语言特性 1 Python的函数参数传递 看两个如下例子,分析运行结果: 代码一: a = 1 def fun(a): a = 2 fun(a) print(a) # 1 代码二: a = ...

  7. All you need to know about sorting in Postgres

    按:之前看pg的执行计划,多次看到不同的排序方式,但不知何意.偶遇此篇讲解pg执行计划三种排序方式,备忘一下. Sorting Sorting is one of the most fundament ...

  8. Codeforces Round #169 (Div. 2) A水 B C区间更新 D 思路

    A. Lunch Rush time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  9. stout代码分析之十：c++11之move和forward

    stout中大量使用了c++11的特性,而c++11中move和forward大概是最神奇的特性了. 左值和右值的区别 ; // a是左值,0是右值 int b = rand(); // b是左值,r ...

  10. [LeetCode] Largest Rectangle in Histogram O(n) 解法详析， Maximal Rectangle

    Largest Rectangle in Histogram Given n non-negative integers representing the histogram's bar height ...