可拖动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 ...
随机推荐
- 如何创建数据库以及MySQL增删改查命令的简单运用
在已经安装好MySQL的前提下 1.在Windows打开命令提示符窗口,输入命令启动MySQL命令行工具并登入root用户:mysql -h localhost -u root -p 2.输入密码后, ...
- 视频剪辑软件调研:Adobe Premiere、会声会影、抖音短视频
Adobe Premiere.会声会影.抖音短视频基本功能特点对比: 特点 Adobe Premiere 会声会影 抖音短视频 运行平台 Win7/Win8/Win10.macOS Win7/Win ...
- jeecg-boot 简易部署方案
jeecg-boot采用前后端分离的方案,前后端代码不在一起.想要部署 一般是通过反向代理实现. jeecg-boot目前支持更好更简单的解决方案: jeecg 在配置文件里面指定了 webapp的存 ...
- python 随机生成图片验证码背景RGB-浅色或者深色
import random def random_color(is_light = True): return (random.randint(0 ,127) + int(is_light) * 12 ...
- hadoop启动报错:localhost: ssh: Could not resolve hostname localhost
hadoop启动journalnode时报错:localhost: ssh: Could not resolve hostname localhost: Temporary failure in na ...
- Collections与Collection
Collection是集合体系的最顶层,包含了集合体系的共性 Collections是一个工具类,方法都是用用Collection Collections方法: //static int binary ...
- Web用户登录---验证码的设计与实现
在开发中验证码是比较常用到有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试的方式. 验证码生成步骤:1.获得随机生成的颜色,画出随机线条生成背景底.2.String cod ...
- supervisorctl安装使用文档
1.apt-get install supervisor下载或者pip install supervisor(因为supervisor是python写的)supervisor和python项目没有关系 ...
- C#字符串和数组互转
string str = "a,b,c,d,e"; string[] strArray = str.Split(','); //字符串转数组 ...
- go语言变量
变量可以通过变量名访问 Go 语言变量名由字母.数字.下划线组成,其中首个字符不能为数字 声明变量的一般形式是使用 var 关键字: var identifier type 变量声明 1. 指定变量类 ...