可拖动div
客户要求,页面有图片并且可以随意拖动
具体实现:
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的更多相关文章
- js实现可拖动Div
随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...
- javascript拖动div
div拖动代码,在用此代码之前,你可能需要将你需要拖动的元素style设置position: absolute; #textareaSavaDiv{ position: absolute; right ...
- easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字
先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- [可拖动DIV]刚开通博客顺便就写了点东西!
说说我自己的思路 首先需要一个初始div div { border: 1px #333 solid; width: 200px; height: 50px; } <div id="od ...
- JS拖动DIV布局
方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 拖动DIV
链接:https://www.cnblogs.com/joyco773/p/6519668.html 移动端:div在手机页面上随意拖动 1 <!doctype html> 2 & ...
- JS实现拖动div层移动
JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别---- pageX,pageY,layerX,layerY,clientX,clientY,screen ...
- 基于jquery的可拖动div
昨天给大家介绍了一款基于jquery ui漂亮的可拖动div实例,今天要给大家分享一款基于jquery的可拖动div.这款可拖动div只要引用jquery就可以,无需引用jquery ui.还实时记录 ...
- 一款基于jquery ui漂亮的可拖动div实例
今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览 ...
- Javascript 简单实现鼠标拖动DIV
http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...
随机推荐
- mybatis学习1
一.mybatis步骤 1.根据xml配置文件(全局配置文件)创建一个SqlSessionFactory对象 有数据源一些运行环境信息2.sql映射文件:配置了每一个sql,以及sql的封装规则等. ...
- CentOS7.0 采用压缩包 安装Nginx 1.7.4和添加Tomcat为系统服务 nginx结合tomcat
CentOS7.0 采用压缩包 安装Nginx 1.7.4 一.安装准备首先由于nginx的一些模块依赖一些lib库,所以在安装nginx之前,必须先安装这些lib库,这些依赖库主要有g++.gcc ...
- 可视化svg深入理解viewport、viewbox、preserveaspectradio
直接运行此例子 深入理解svg的viewport.viewbox.preserveaspectradio实例 <!DOCTYPE html> <html lang="en& ...
- 使用IDEA的项目上传到GitHub
使用IDEA的项目上传到GitHub 前提条件: 1.配置好Git(https://jingyan.baidu.com/article/8275fc867b652046a03cf613.html) 2 ...
- Dynamic Method Binding in Delphi 动态方法绑定
Dynamic Method Binding in Delphi 动态方法绑定 https://docs.dataabstract.com/Delphi/AdvancedTopics/Dynamic ...
- CentOS中wget安装
通过linux text最小化安装或者安装Basic Server版本后出现的问题是wget命令不能使用了,这时可以使用rpm命令来安装wget.方法一.网络安装 rpm -ivh http:/ ...
- python学习Day10 函数的介绍(定义、组成、使用)
今日学习内容: 1.什么是函数 :函数就是一个含有特定功能的变量,一个解决某问题的工具 函数的定义:通过关键字def + 功能名字():代码体(根据需求撰写代码逻辑) 2.为什么要用函数:可以复用:函 ...
- Docker Got permission denied while trying to connect to the Docker daemon socket at unix://
这是没有权限的原因,先将自己加入docker组,然后在重新启动就可以了, 下面参考来源:https://blog.csdn.net/weixin_40896352/article/details/80 ...
- 解决mysql连接linux上mysql服务器的问题
在远程连接mysql的时候,连接不上,出现如下报错:Lost connection to MySQL server at 'waiting for initial communication pack ...
- superset在 centos 7安装运行
参考:1.http://blog.csdn.net/u014729236/article/details/76302888?locationNum=2&fps=1 2.https://www. ...