js可以随意拖拽的div的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>divDrag</title>
<style>
#div1{
width: 300px;
height: 300px;
background-color: #ccc;
/*一定要绝对定位*/
position: absolute;
}
</style>
</head>
<body>
<div id="div1"></div>
<script src="drag.js"></script>
</body>
</html>
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;
};
;
};
js可以随意拖拽的div的实现的更多相关文章
- js实现可拖拽的div
前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...
- 简单的div元素拖拽到div
drag1 drag2 drag3 代码如下: <!DOCTYPE HTML> <html> <head> <title>div拖拽到div</t ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- js插件-简单拖拽
前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/ 是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话 ...
- 拖拽改变div的大小
拖拽改变div的大小 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- 可以随鼠标拖拽的div
可以拖拽的div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- php和js实现文件拖拽上传
Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...
- 【原创】js实现一个可随意拖拽排序的菜单导航栏
1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...
- Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
随机推荐
- 在net中json序列化与反序列化 面向对象六大原则 (第一篇) 一步一步带你了解linq to Object 10分钟浅谈泛型协变与逆变
在net中json序列化与反序列化 准备好饮料,我们一起来玩玩JSON,什么是Json:一种数据表示形式,JSON:JavaScript Object Notation对象表示法 Json语法规则 ...
- HDU 4249 A Famous Equation(数位DP)
题目链接:点击打开链接 思路:用d[i][a][b][c][is]表示当前到了第i位, 三个数的i位各自是a,b,c, 是否有进位 , 的方法数. 细节參见代码: #include<cstdio ...
- Hibernate基于注解的双向one-to-many映射关系的实现
在项目中用到了一对多的实体类关系映射,之前接触的都是基于配置文件的映射实现.可是公司的大部分都是基于注解的.因此自己參考之前的代码捣鼓了基于注解的一对多的映射关系实现. 背景: 一的一端:QingAo ...
- Android studio一些设置项
------Appearance选项------------------------------------------------------------- Cylic scrolling in l ...
- 2015南阳CCPC D - Pick The Sticks 背包DP.
D - Pick The Sticks Description The story happened long long ago. One day, Cao Cao made a special or ...
- spark 操作Hive时遇到的问题
To adjust logging level use sc.setLogLevel(newLevel). For SparkR, use setLogLevel(newLevel).17/10/14 ...
- Django day30 自定义配置settings文件,分页器,版本控制
一:自定义配置settings文件 1.有两套配置文件,默认配置,用户的配置 2.如果某个字段,用户配置了,就用用户的,如果没配置,就用默认的 二:分页器 1.三种分页: # 普通分页 from re ...
- php从数据库读取中文显示问号??的解决办法
出错原因:1.数据库编码格式不对 2.PHP编码格式不对 3.浏览器编码格式不对 上面三者编码格式不统一,就会出现问题 数据库读取的时候在mysqli_connect()之后要设置连接字符编码mysq ...
- JavaScript--如何插入JS
我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScrip ...
- Ambari?自动部署Hadoop集群
自动部署?Ambari Ambari 跟 Hadoop 等开源软件一样,也是 Apache Software Foundation 中的一个项目,并且是顶级项目.就 Ambari 的作用来说,就是创建 ...