让一个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 ...
随机推荐
- UML-设计对象时涉及的制品有哪些？
1.SSD.系统操作.交互图--->用例实现 1).通信图 2).顺序图 将SSD中的系统操作作为领域层控制器对象的起始消息.这是关键. 2.用例--->用例实现 在整个开发过程中,业务人 ...
- 关于图算法 & 图分析的基础知识概览
网址:https://learning.oreilly.com/library/view/graph-algorithms-/9781492060116/ 你肯定没有读过这本书,因为这本书的发布日期是 ...
- python中的API学习
URL: url是统一资源定位符,对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该 ...
- 干货 | 云解析DNS之网站监控
云解析是在域名解析的基础上,由京东云团队,结合京东云的优质网络.主机资源研发的高可用.高可靠.功能丰富的权威DNS服务器.云解析拥有简单易用的控制台,方便用户对域名进行操作.采用多集群.多节点部署,拥 ...
- 17.3.12--uillib模块
1---uillib是python标准库中最常用的一个python网络应用资源访问的模块,他可以让你像访问文本一样,读取网页的内容 它的作用是访问一些不需要验证的网络资源和cookie等 uillib ...
- PAT Advanced 1132 Cut Integer (20) [数学问题-简单数学]
题目 Cutting an integer means to cut a K digits long integer Z into two integers of (K/2) digits long ...
- CSP模拟赛2游记
这次由于有课迟到30min,了所以只考了70min. 调linux配置调了5min,只剩下65min了. T1:有点像标题统计,但要比他坑一点,而且我就被坑了,写了一个for(int i=1;i< ...
- 学习数论 HDU 4709
经过杭师大校赛的打击,明白了数学知识的重要性 开始学习数论,开始找题练手 Herding HDU - 4709 Little John is herding his father's cattles. ...
- Django_HTML
一.web开发之HTML 1.1 HTML相关基础 快速生成html的模版方法: 在visual code的新建html文件中输入:!然后tab回车就会出现HTML的模版 双标签: <p> ...
- POJ 3080 Blue Jeans (求最长公共字符串）
POJ 3080 Blue Jeans (求最长公共字符串) Description The Genographic Project is a research partnership between ...