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

具体实现:

  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. oracle SQL多表查询

    SQL多表查询 1.集合理论 1.1 什么是集合 具有某种特定性质的事物的总体. 集合的特性:无序性.互异性.确定性. 一个集合可以小到从一个表中取出一行中的一列.              1 ro ...

  2. 15Linux_DHCP_Postfix_Dovecot_LDAP

    DHCP_ Postfix_ Dovecot_ LDAP

  3. Tomcat下载以及安装、eclipse工具配置tomcat9的具体步骤

    (小白经验,大咖勿喷) 开始学javaweb的一些技术了,最让人头疼的就是环境的配置以及必要软件的安装,比如数据库mysql.服务器Tomcat.eclipse工具等等. 自己也度娘了很多大咖的经验, ...

  4. java学习--修饰符

    Java语言提供了很多修饰符,主要分为以下两类: 访问修饰符 非访问修饰符 访问控制修饰符 访问控制修饰符用来修饰类和类内部的成员变量和成员方法,来确定其访问权限 类的访问控制修饰符只有两种 defa ...

  5. 用python发送短消息(基于阿里云平台)

    新版短信接口在线测试页面:https://api.aliyun.com/new#/?product=Dysmsapi&api=SendSms&params={}&tab=DEM ...

  6. jquery通过AJAX从后台获取信息并显示在表格上的类

    前一阵我写了:<jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中.>现在,我把他们处理了一下,不需要每次写代码了: 具体代码如下: //获取数据并显示数据表格 funct ...

  7. IEEE/ACM International Conference on Advances in Social Network Analysis and Mining (ASONAM) 2014 Industry Track Call for Papers

    IEEE/ACM International Conference on Advances in Social Network Analysis and Mining (ASONAM) 2014 In ...

  8. 《DOM Scripting》学习笔记-——第九章 CSS-DOM

    本章内容: 一.style属性 二.如何检索样式信息 三.如何改变样式 属性: 包含位置信息:parentNode , nextSibling , previousSibling , childNod ...

  9. Nagios监控配置文件及监控流程

    1.安装路径/usr/local/nagios/下存在etc.bin.sbin.share.var 这五个目录.Nagios 各个目录用途说明如下: bin Nagios 可执行程序所在目录 etc ...

  10. vue中less文件全局引用

    1.先安装sass-resources-loader   npm install sass-resources-loader 2.然后在build->utils.js修改less配置 在less ...