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 ...
随机推荐
- zoj 1610 Count the Colors 【区间覆盖 求染色段】
Count the Colors Time Limit: 2 Seconds Memory Limit: 65536 KB Painting some colored segments on ...
- CentOS-6.4-DVD系统中安装Oracle-11.2.0.4
完整版见https://jadyer.github.io/2014/05/18/centos-install-oracle/ /** * CentOS-6.4-DVD系统中安装Oracle-11.2. ...
- java7 的final真的有坑啊。
看这里:https://bugs.openjdk.java.net/browse/JDK-7004835 java8u20已经修复了.
- Linux下的IPC－UNIX Domain Socket【转】
本文转载自:http://blog.csdn.net/guxch/article/details/7041052 一. 概述 UNIX Domain Socket是在socket架构上发展起来的用于同 ...
- Git新建本地分支与远程分支关联问题：git branch --set-upstream【转】
本文转载自:http://blog.csdn.net/netwalk/article/details/21088405 Git新建本地分支与远程分支关联问题:git branch --set-upst ...
- windows下 redis/tomcat 服务自启动
//设置redis服务自启动 //根据个人配置执行语句. redis-server --service-install redis.windows.conf --loglevel verbose ...
- maven+ssm+oracle实现简单的增删改查
首先看一下项目结构 第一步先导入jar包 pom.xml <properties> <spring.version>4.3.18.RELEASE</spring.vers ...
- 在vue项目npm run build后，index.html中引入css和js 报MIME type问题
问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html ...
- linux 怎么在后台添加运行脚本,即使关机也可以用
nohup ma.php >guangxindai.log 2>&1 & 或者 nohup ma.php & 在shell中,文件描述符通常是:STDIN标准输入, ...
- ACM_绝对值排序
Why Males And Females Apart? Time Limit: 2000/1000ms (Java/Others) Problem Description: In so many o ...