让一个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 ...
随机推荐
- Property or method "cancleInput" is not defined on the instance but referenced during render.
因为我的点击事件,是动态添加上去的 报错如标题 [Vue warn]: Property or method "cancleInput" is not defined on th ...
- 超级详细通信协议解析webservice和dubbo通信协议区别
简单说下接触webservice的背景吧,因为之前的接口对接更多的是成熟的接口品牌像是阿里巴巴.腾讯.聚合数据等,他们接口规范一般都是基于restful进行接口对接.什么是restful接口,可以通过 ...
- 洛谷 P2320 [HNOI2006]鬼谷子的钱袋
题目传送门 解题思路: 对于每一个数i,我们都可以用i/2来表示,而对于i/2我们可以用i/4表示......(以此类推) 举个例子,对于10,我们可以用5 + 5来表示,而5可以用 3 + 2表示, ...
- Java if、switch语句，break，case，类型转换、常量、赋值比较、标识符（2）
if语句: /* if else 结构 简写格式: 变量 = (条件表达式)?表达式1:表达式2: 三元运算符: 好处:可以简化if else代码. 弊端:因为是一个运算符,所以运算完必须要有一个结果 ...
- linux.linuxidc.com - /2011年资料/Android入门教程/
本文转自 http://itindex.net/detail/15843-linux.linuxidc.com-%E8%B5%84%E6%96%99-android Shared by Yuan 用户 ...
- 使用git submodule
git submodule 引用 $ git help submodule $ git submodule add https://github.com/aditya-grover/node2vec. ...
- selector的使用，android:clickable="true"
<ImageView android:id="@+id/patrol_buzzer_btn" android:layout_width="80dp" an ...
- Vus the Cossack and Strings（Codeforces Round #571 (Div. 2)）（大佬的位运算实在是太强了！）
C. Vus the Cossack and Strings Vus the Cossack has two binary strings, that is, strings that consist ...
- UML-领域模型-如何找到概念类
有3个方法 方法1:对已有的重用和修改(这是最好的方法) 重用和修改现有模型.这些模型来源于之前的项目.网上的 方法2:使用分类列表 从网上搜索该领域的常见分类,或参考书籍Martin Fowler的 ...
- JavaScript学习笔记 - 进阶篇（3）- 流程控制语句
if语句 if语句是基于条件成立才执行相应代码时使用的语句. 语法: if(条件) { 条件成立时执行代码} 注意:if小写,大写字母(IF)会出错! 假设你应聘web前端技术开发岗位,如果你会HTM ...