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 ...
随机推荐
- LeetCode 551. Student Attendance Record I (学生出勤纪录 I)
You are given a string representing an attendance record for a student. The record only contains the ...
- mysql创建用户，并授予权限
mysql> GRANT ALL PRIVILEGES ON *.* TO jiqing@"%" IDENTIFIED BY '123456'; Query OK, 0 ro ...
- JAVA基础(多线程Thread和Runnable的使用区别（转载）
转自:http://jinguo.iteye.com/blog/286772 Runnable是Thread的接口,在大多数情况下“推荐用接口的方式”生成线程,因为接口可以实现多继承,况且Runnab ...
- C# 针对文件夹的操作
//创建文件夹Directory.CreateDirectory(Server.MapPath("a"));Directory.CreateDirectory(Server.Map ...
- $CF1141A Game 23$
这题很简单啊 可以用\(DFS\)来打 毕竟是 \(2^x*3^y=m 输出x+y啊\) 这是最简单的做法 #include <bits/stdc++.h> using namespace ...
- BZOJ 2001 线段树+LCT (TLE)
同是O(nlog^2n)怎么常数差距就这么大呢,,, 同是LCT 怎么我的和Po姐姐的常数差距就这么大呢 我绝对是脑子被驴踢了才写这个垃圾算法 //By SiriusRen #include < ...
- SPOJ 1811 SAM 初探
思路: 一个串建SAM 另一个串在SAM上跑 //By SiriusRen #include <cstdio> #include <cstring> #include < ...
- ACM_ZHANGZHANG喜欢手表
ZHANGZHANG喜欢手表 Time Limit: 2000/1000ms (Java/Others) Problem Description: ZHANGZHANG刚过生日,收到了好朋友NENGN ...
- 【转】Linux账号管理之useradd
转自:http://www.jb51.net/article/45848.htm Linux 系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然 ...
- tomcat生成catalina.out文件
生成catalina.out方法 导语:本文为Windows下生tomcat将控制台信息输出到catalina.out文件 且 保证能实时查看日志文件的方法. 一.创建catalina.out 1. ...