让一个div拖动和让一个panel拖动加拉大拉小
一、让一个div拖动
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery：鼠标拖动DIV</title>
<style type="text/css">
div#computerMove{
position:absolute;
top:50px;
left:50px;
width:200px;
height:30px;
line-height:30px;
background-color:#00CCCC;
text-align:center;
color:#FFFFFF;
cursor:default;
}
</style>
</head>
<body>
<div id="computerMove">点击我拖动</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var $div = $("div#computerMove");
/* 绑定鼠标左键按住事件 */
$div.bind("mousedown",function(event){
/* 获取需要拖动节点的坐标 */
var offset_x = $(this)[0].offsetLeft;//x坐标
var offset_y = $(this)[0].offsetTop;//y坐标
/* 获取当前鼠标的坐标 */
var mouse_x = event.pageX;
var mouse_y = event.pageY;
/* 绑定拖动事件 */
/* 由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素 */
$(document).bind("mousemove",function(ev){
/* 计算鼠标移动了的位置 */
var _x = ev.pageX - mouse_x;
var _y = ev.pageY - mouse_y;
/* 设置移动后的元素坐标 */
var now_x = (offset_x + _x ) + "px";
var now_y = (offset_y + _y ) + "px";
/* 改变目标元素的位置 */
$div.css({
top:now_y,
left:now_x
});
});
});
/* 当鼠标左键松开，接触事件绑定 */
$(document).bind("mouseup",function(){
$(this).unbind("mousemove");
});
})
</script>
</body>
</html>
二、让一个panel拖动加拉大拉小
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>jQuery拖放</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="dd.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color: #eee;
} .dragBox_MrY {
width: 200px;
height: 100px;
cursor: move;
position: absolute;
top: 30px;
left: 30px;
background-color: #FFF;
border: 1px solid #CCCCCC;
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
} .main_tabletop {
width: 100%;
height: 20px;
background: #ffee00;
}
</style>
</head> <body>
<div class="dragBox_MrY">
<div class="main_tabletop">我是可以拖动的标题</div>
左、右、下、左下、右下都可放大缩小
</div>
</body> </html>
dd.js
$(function() {
$(document).mousemove(function(e) {
if (!!this.move) {
var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
callback = document.call_down || function() {
$(this.move_target).css({
'top': e.pageY - posix.y,
'left': e.pageX - posix.x
});
};
callback.call(this, e, posix);
}
}).mouseup(function(e) {
if (!!this.move) {
var callback = document.call_up || function(){};
callback.call(this, e);
$.extend(this, {
'move': false,
'move_target': null,
'call_down': false,
'call_up': false
});
}
});
var $box = $('.dragBox_MrY .main_tabletop').mousedown(function(e) {
var $p = $(this).parent();
var $pp = $p[0];
var offset = $p.offset();
$pp.posix = {'x': e.pageX - offset.left, 'y': e.pageY - offset.top};
$.extend(document, {'move': true, 'move_target':$pp });
});
$('.dragBox_MrY').bind(
{'mousemove':function(e){
$(this).css({cursor: "default"});
var offset = $(this).offset(), resize=true;
var x = e.clientX, y = e.clientY, t = offset.top, l = offset.left, w = $(this).width(), h = $(this).height(), ww = $('.main_tabletop').height(), b = 10;
if(x<(l+b) && y > (t+ww) && y < (t+h-b)){
$(this).css({cursor: "w-resize"});
$(this).unbind("mousedown").bind({"mousedown":function(e){
var $p = $(this);
var posix = {
'w': $p.width(),
'h': $p.height(),
'x': e.pageX,
'y': e.pageY
};
$.extend(document, {'move': true, 'call_down': function(e) {
$p.css({
'width': Math.max(30, posix.x-e.pageX + posix.w),
'left': Math.max(30, e.pageX)
});
}});
}});
}else if(x<(l+w) && x>(l+w-b) && y > (t+ww) && y < (t+h-b)){
$(this).css({cursor: "e-resize"});
$(this).unbind("mousedown").bind({"mousedown":function(e){
var $p = $(this);
var posix = {
'w': $p.width(),
'x': e.pageX
};
resizeBox($p, posix, e);
}});
}else if(y<(t+h) && y>(t+h-b) && x>(l+b) && x<(l+w-b)){
$(this).css({cursor: "s-resize"});
$(this).unbind("mousedown").bind({"mousedown":function(e){
var $p = $(this);
var posix = {
'h': $p.height(),
'y': e.pageY
};
resizeBox($p, posix, e);
}
});
}else if(x<(l+b) && y>(t+h-b) && y<(t+h)){
$(this).css({cursor: "sw-resize"});
$(this).unbind("mousedown").bind({"mousedown":function(e){
var $p = $(this);
var posix = {
'w': $p.width(),
'h': $p.height(),
'x': e.pageX,
'y': e.pageY
};
$.extend(document, {'move': true, 'call_down': function(e) {
$p.css({
'width': Math.max(30, posix.x-e.pageX + posix.w),
'height': Math.max(30, e.pageY - posix.y + posix.h),
'left': Math.max(30, e.pageX)
});
}});
}});
}else if(y<(t+h) && y>(t+h-b) && x<(l+w) && x>(l+w-b)){
$(this).css({cursor: "se-resize"});
$(this).unbind("mousedown").bind({"mousedown":function(e){
var $p = $(this);
var posix = {
'w': $p.width(),
'h': $p.height(),
'x': e.pageX,
'y': e.pageY
};
$.extend(document, {'move': true, 'call_down': function(e) {
$p.css({
'width': Math.max(30, e.pageX - posix.x + posix.w),
'height': Math.max(30, e.pageY - posix.y + posix.h)
});
}});
}
});
}else if(y<(t+ww) && x>l && x<(l+w)){
$(this).css({cursor: "move"});
$(this).unbind("mousedown");
}
},
"mouseup":function(){
$(this).unbind("mousedown");
}
});
function resizeBox($p,posix,e){
$.extend(document, {'move': true, 'call_down': function(e) {
$p.css({
'width': Math.max(30, e.pageX - posix.x + posix.w),
'height': Math.max(30, e.pageY - posix.y + posix.h)
});
}});
}
});
jquery自行下载
让一个div拖动和让一个panel拖动加拉大拉小的更多相关文章
- 如何让一个DIV浮动在另一个DIV上面
直接上DEMO了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3 ...
- 怎么让一个div 悬浮在另一个div上
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一个DIV相对于另一个DIV定位
<div style="position:relative"><div style="position:absolute; top:0px; left: ...
- css实现两个div并排等高（一个div高度随另一个高度变化而变化）
方法一.两个div都设置 display: table-cell; 方法二.父级div设置 display: -webkit-box;
- 将一个dropdownlist从一个div复制到另一个div
<select id="dropdwon1"> <option value=">Item1</option> <option v ...
- html中一个div怎么引入另一个页面
转载:https://zhidao.baidu.com/question/588973997598951645.html
- 一个div居于另一个div底部
一个div如何与另一个div底部对齐,方法有很多,比如使用绝对定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
- 探讨把一个元素从它所在的div 拖动到另一个div内的实现方法
故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动, 单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似 ...
- CSS中div覆盖另一个div
将一个div覆盖在另一个div上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 <htm ...
随机推荐
- Django1.11创建
Djiango 1.11.1 虚拟环境配置 创建虚拟环境 mkvirtualenv 虚拟环境名字 -p python3 安装django pip install django==1.11.11 卸载包 ...
- UML-状态机图和建模
1.目标:如何画状态机图 2.定义:描述某个对象的状态.感兴趣的事件.以及对象响应该事件的行为. 转换:用箭头表示 状态:用圆角矩形表示 事件:指的是一件值得注意的事情的发生.如:拿起电话. 当事件“ ...
- 销售de经典语录
[销售的境界] 1.顾客要的不是便宜,而是感觉上占了便宜: 2.不要与顾客争论价格,要与顾客讨论价值: 3.没有不对的客户,只有不够好的服务: 4.卖什么不重要,重要的是怎么卖: 5.没有最好的产品, ...
- js中要声明变量吗？
你好,js语言是弱类型语言,无需申明即可直接使用,默认是作为全局变量使用的.建议:在function里时应使用var 申明变量,这样改变量仅仅只在function的生存周期内存在,不会污染到,全局控件 ...
- 201604-2 俄罗斯方块 Java
大家谁能帮我看看是哪里不对,提交到系统中是0分,在Eclipse中可以得出例子中的结果 思路: 题目中有两个关键点:如何模拟下落的过程,如何判断方块下落在哪里停止. 在数据的存储上,需要保存整个&qu ...
- DAO层使用mybatis框架有关实体类的有趣细节
1.根据个人习惯,将储存那些数据库查询结果集有映射关系的实体类的Package包名有如下格式: cn.bjut.domain cn.bjut.pojo cn.bjut.model cn.bjut.en ...
- LGOJ1264 K-联赛
这题其实不难想到 Description link 题意太长了,概括不来,去题库里扫一眼吧(但是很好懂) Solution \[Begin\] 考虑一个事情:每一个队伍的输局是没有用的 贪心一下,让每 ...
- 试验指标|试验单位|均方|随机模型|固定模型|字母标记法|LSR|q检验|LSD|重复值|弥补缺失数据|可加性|平方根转换|对数转换|反正弦转化
第五章 方差分析 试验指标是什么? 就是统计的测量值,eg:身高体重 试验单位( experimental unit )是什么? 实验载体,比如一只小白鼠 均方是什么? 就是方差 随机模型的τ有何特点 ...
- Python操作redis总结
安装模块及配置 首先安装redis,在Ubuntu下输入指令pip install redis即可.下载完成后,cd到指定目录下,打开指定文件,如下图所示: 输入密码打开后,修改指定地方的内容,与上篇 ...
- C盘满了解决办法之hiberfil.sys文件
C盘的hiberfil文件占了很大的空间: 这个是系统的休眠文件,可以通过命令关闭:powercfg -h off [on是打开]