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

具体实现:

  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. 李清华201772020113《面向对象程序设计(java)》第十一周学习总结

    实验十一   集合 实验时间 2018-11-8 1.实验目的与要求 (1) 掌握Vetor.Stack.Hashtable三个类的用途及常用API: (2) 了解java集合框架体系组成: (3) ...

  2. C# Func与Action

    Func与Action是C#的内置委托,在使用委托时,可不必再定义. (1)Func:有返回类型的委托. Func类型的委托,肯定有一个返回类型,如果Func只有一个参数,那么它就是代表没有参数但是有 ...

  3. MySQL 8.0 中统计信息直方图的尝试

    直方图是表上某个字段在按照一定百分比和规律采样后的数据分布的一种描述,最重要的作用之一就是根据查询条件,预估符合条件的数据量,为sql执行计划的生成提供重要的依据在MySQL 8.0之前的版本中,My ...

  4. setCapture 使用方法

    setCapture 可以捕获到 移动到浏览器外的鼠标事件. 例如拖动过程中,即使鼠标移动到了浏览器外,拖动程序依然可以执行! 作用就是把 把鼠标事件 捕获到 当前文档指定的对象! setCaptur ...

  5. 一个box四周边框阴影

    实现效果如图: 代码如下: .section { margin: 20upx 30upx; padding: 40upx; border-radius: 6px; border-top: #0670C ...

  6. react 关闭eslint 配置

    在 package.json 中修改为一下 "eslintConfig": { "extends": "react-app", " ...

  7. html入门第一天(知识总结)。

    一文本标签:----------双标签.<b>标签 <strong>标签,文本呈现粗体(Html5中建议用strong,strong语义更强)<i>标签 <e ...

  8. java百度云推送

    实体类: import java.io.Serializable; import javax.persistence.Entity; /** * * @Version : 1.0 * @Author ...

  9. python跨平台注释

    使python程序运行在window以外的平台上 !#  user/bin/python

  10. poj 2778 AC自动机+矩阵快速幂

    题目链接:https://vjudge.net/problem/POJ-2778 题意:输入n和m表示n个病毒,和一个长为m的字符串,里面只可以有'A','C','G','T' 这四个字符,现在问这个 ...