div 拖拽
html
<!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" class="box"></div>
<script src="drag.js"></script>
</body>
</html>
//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;
};
;
};
jquery
$('.box').mousedown(function(ev) {
var oevent = ev || event;
var distanceX = oevent.clientX - oevent.currentTarget.offsetLeft;
var distanceY = oevent.clientY - oevent.currentTarget.offsetTop;
$(document).mousemove(function(ev) {
var oevent = ev || event;
$('.box').css('left', oevent.clientX - distanceX + 'px');
$('.box').css('top', oevent.clientY - distanceY + 'px');
});
$(document).mouseup(function(ev) {
$(document).unbind('mousemove');
$(document).unbind('mouseup');
});
})
div 拖拽的更多相关文章
- 实现Div拖拽
直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmou ...
- html之div拖拽，html5拖拽
html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp
- 运用DIV拖拽实现resize和碰撞检测
运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...
- 纯js实现DIV拖拽
写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...
- 案例：简易的Div拖拽
案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedow ...
- html --- javascript --- div --- 拖拽方块
当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...
- 原生js实现div拖拽+按下鼠标计时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...
- 原生js实现div拖拽
十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- div拖拽缩放jquery插件编写——带8个控制点
项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...
- jquery实现div拖拽
1.引入jquery1.8.3 ,模块拖拽js代码: //模块拖拽 $(function(){ var _move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(& ...
随机推荐
- P2947 [USACO09MAR]向右看齐Look Up--单调栈
单调栈真的很好用呢! P2947 [USACO09MAR]向右看齐Look Up 题目描述 Farmer John's N (1 <= N <= 100,000) cows, conven ...
- Coverity代码扫描工具
1.说明:Coverity代码扫描工具可以扫描java,C/C++等语言,可以和jenkins联动,不过就是要收钱,jenkins上的插件可以用,免费的,适用于小的java项目 2.这是Coverit ...
- ExtJs5的基本理论概念
概述 理解ExtJs里面的一些基本关键字的概念是使用ExtJs搭建MMVC框架的基础,在ExtJs中,我们通常遇到ExtJs的配置和启动项Ext.application(),该方法是ExtJs程序初始 ...
- 多台CentOS服务器下实现SSH免密码登录
ROOT用户下实现SSH免密码登录 第一步:进入目录/root/.ssh $ cd /root/.ssh/ 执行以下命令,会在当前目录下生成公钥(id_rsa.pub)/私钥(id_rsa)对 第二 ...
- flask微电影系统开发中上下文处理器
在做日志模块开发的过程中,我们遇到了一个问题,就是日期的问题,我们这个时间就要用到上下文处理器来解决问题,他的作用就是可以在我们固定模块中进行传递,我们的模块如下 @admin.context_pro ...
- 揭开JS闭包的面纱
今天看了关于js闭包方面的文章,还是有些云里雾里,对于一个菜鸟来说,学习闭包确实有一定的难度,不说别的,能够在网上找到一篇优秀的是那样的不易. 当然之所以闭包难理解,个人觉得是基础知识掌握的不牢,因为 ...
- (二)文档请求不同源之window.postMessage跨域
一.基本原理 HTML5为了解决跨域,引入了跨文档通信API(Cross-document messaging).这个API为window对象新增了一个window.postMessage方法,允许跨 ...
- (二)文档请求不同源之flash跨域
对于FLash,IE是认object标签的,但是FF和Chrome是认embed标签的. 1.客户端 <param name="allowScriptAccess" valu ...
- PostgreSQL自学笔记:1 初识 PostgreSQL
博主教材:李小威.清华大学出版社.<PostgreSQL 9.6 从零开始学> 博主操作系统系统:Windows10 博主PostgreSQL版本:PostgreSQL 9.6 和 Pos ...
- django——web框架简介
1.web应用 Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件. 应用程序有两种模式C/S.B/S.C/S是客户 ...