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 ...
随机推荐
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年,我们被耍过的bug——has
input屏蔽历史记录 设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处 ;(function($){$.ex ...
- tomcat连接mysql的3个问题解决
转载请标明出处: 本文出自:[ouyida3的博客] 1.BasicDataSourceFactory Caused by: java.lang.ClassNotFoundException: org ...
- C++中的继承与虚函数各种概念
虚继承与一般继承 虚继承和一般的继承不同,一般的继承,在目前大多数的C++编译器实现的对象模型中,派生类对象会直接包含基类对象的字段.而虚继承的情况,派生类对象不会直接包含基类对象的字段,而是通过一个 ...
- Core Data的那点事儿~
一.介绍下Core Data CoreData在早些年iOS开发中使用不多,因为其本身性能略低,以及不使用SQL语句而失去的灵活性,再加上FMDB之类封装SQLite的三方框架很好用,所以一直不受待见 ...
- 【转载】同步与异步--阻塞与非阻塞型I/O
同步阻塞IO 在这个模型中,应用程序(application)为了执行这个read操作,会调用相应的一个system call,将系统控制权交给kernel,然后就进行等待(这其实就是被阻塞了).ke ...
- 使用display:flex;实现垂直水平居中
body,div{margin:0px;padding:0px;} .flex-container{display:flex;height:300px;background-color:#ddd;ju ...
- 编译android4.4 报错error: call to '__property_get_too_small_error' declared with attribute 的处理 (转载)
转自:http://blog.csdn.net/syhost/article/details/14448899 完整的报错为: system/core/include/cutils/propertie ...
- PCB Windows Petya(永恒之蓝)勒索病毒补丁检测代码
公司内部电脑招受到新的勒索病毒Petya(永恒之蓝)攻击,直接导致受攻击的电脑系统崩贵无法启动,这次勒索病毒攻击影响范围之广,IT,人事,工程,生产,物控等部门都无一幸免,对整个公司运转产生了非常严重 ...
- [Swift通天遁地]七、数据与安全-(17)使用Swift实现原生的3DES加密和解密
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- Linux 下文本查找技巧你掌握了吗?
前言 之前介绍过很多linux下查找相关的命令,例如<Linux中的文件查找技巧>,<find命令高级用法>,<如何查看linux中文件打开情况-lsof命令>等等 ...