客户要求,页面有图片并且可以随意拖动

具体实现:

  css: 

    #div1{
      width: 30px;
      height: 30px;
      /*一定要绝对定位*/
      position: absolute;
      /*初始位置*/
      left: 5%;
    }

  js:

  window.onload = function(){
    var div1 = document.getElementById("div1");
    div1.onmousedown = function(ev){
      var oevent = ev || event;
      var distanceX = oevent.clientX - div1.offsetLeft;
      var distanceY = oevent.clientY - div1.offsetTop;
      document.onmousemove = function(ev){
        var oevent = ev || event;
        div1.style.left = oevent.clientX - distanceX + 'px';
        div1.style.top = oevent.clientY - distanceY + 'px';
      };
      document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  };

  jsp:

  <div id="div1" class="first" style="left: 3%;bottom: 37%">
    <img src="<%=path %>/frame/images/fxsj.png" style="width: 80px;height: 80px" class="fxsj" />
  </div>

可拖动div的更多相关文章

  1. js实现可拖动Div

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...

  2. javascript拖动div

    div拖动代码,在用此代码之前,你可能需要将你需要拖动的元素style设置position: absolute; #textareaSavaDiv{ position: absolute; right ...

  3. easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字

    先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...

  4. [可拖动DIV]刚开通博客顺便就写了点东西!

    说说我自己的思路 首先需要一个初始div div { border: 1px #333 solid; width: 200px; height: 50px; } <div id="od ...

  5. JS拖动DIV布局

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

  6. 拖动DIV

    链接:https://www.cnblogs.com/joyco773/p/6519668.html   移动端:div在手机页面上随意拖动   1 <!doctype html> 2 & ...

  7. JS实现拖动div层移动

    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screen ...

  8. 基于jquery的可拖动div

    昨天给大家介绍了一款基于jquery ui漂亮的可拖动div实例,今天要给大家分享一款基于jquery的可拖动div.这款可拖动div只要引用jquery就可以,无需引用jquery ui.还实时记录 ...

  9. 一款基于jquery ui漂亮的可拖动div实例

    今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览   ...

  10. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

随机推荐

  1. FPGA笔试必会知识点2—FPGA器件

    FPGA 综合工具并不一定保证能够充分利用芯片结构特点以达到最优目的而且工具本身也不一定非常智能,因为设计本身是复杂多样的且一直在变化,问题总会越来越多,因此在这种情况下,我们必须了解我们的器件结构, ...

  2. IIS下uploadify上传大文件出现404错误(提示上传文件大小超过400M)

    原因:由于IIS7下的默认设置限制了上传大小,所以Web.Config中的大小设置也就失效了. 解决步骤: 1.打开IIS管理器,找到Default Web Site(也就是你的发布站点),先进行停止 ...

  3. NGINX轻松管理10万长连接

    先说说服务为什么使用HTTPs长连接技术?有如下几个原因:对响应时间要求较高:服务走的是公网,客户端与服务端的TCP建立的三次握手和断开的四次握手都需要40ms左右(真实数据包计算出来的),共需要80 ...

  4. python安装selenium和下载浏览器驱动

    1.安装selenium     方法一:可以用在cmd中用pip命令安装. python默认自带pip工具,如果在电脑上配置了pip的环境变量,打开cmd命令窗口后可以直接输入命令pip insta ...

  5. Django中manger/QuerySet类与mysql数据库的查询

    Django中的单表操作 1.精确查询 #查询的结果返回是容器Query Set的函数(Query Set模型类)​# 1. all()   查询的所有的符合条件的结果,支持正向索引,支持索引切片,不 ...

  6. mysql左连接右连接(查询两张表不同的数据)

    有两张表:一张A表he一张B表 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 :right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录: ...

  7. JS stacktrace(Node内存溢出)

    vscode运行项目时,保存.vue文件,项目突然终止运行.输入命令npm run dev重新运行后,终端显示下面的错误. 解决方案: 如果是run dev时报错,在package.json文件里的s ...

  8. KeyValuePair 和 Dictionary 的关系和区别

    KeyValuePair 和 Dictionary 的关系 1.KeyValuePair      a.KeyValuePair 是一个结构体(struct):     b.KeyValuePair  ...

  9. java itext替换PDF中的文本

    itext没有提供直接替换PDF文本的接口,我们可以通过在原有的文本区域覆盖一个遮挡层,再在上面加上文本来实现. 所需jar包: 1.先在PDF需要替换的位置覆盖一个白色遮挡层(颜色可根据PDF文字背 ...

  10. PhoenixFD插件流体模拟——UI布局【Rendering】详解

    Liquid Rendering 流体渲染  本文主要讲解Rendering折叠栏中的内容.原文地址:https://docs.chaosgroup.com/display/PHX3MAX/Liqui ...