让一个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 ...
随机推荐
- poj 3013 最短路SPFA算法
POJ_3013_最短路 Big Christmas Tree Time Limit: 3000MS Memory Limit: 131072K Total Submissions: 23630 ...
- Python 字典列表嵌套输入问题
- vue整合外部js
vue引入外部jsimport { TrackLine } from "../../../../../static/js/trajectory.js";import { initM ...
- h5-应用级缓存
1.html代码及css代码 <!DOCTYPE html> <!--manifest="应用程序缓存清单文件的路径 建议文件的扩展名是appcacje,这个文件的本质就是 ...
- 记一次Java面试问题点总结
引言 昨日接了一个阿里外包的电话面试,问了一些技术问题感觉到自己是真的菜,接触Java开发已经也有一段时间,技术方面说来惭愧,一直以来只是局限于框架工具的用法,也没有进行了解其实现的原理,更重要的是一 ...
- 清除input表单内容
碰到几次情况,页面刷新或者从上级页面返回表单的内容依然遗留,很影响使用. <form action="" method="" autocomplete=& ...
- [Algo] 131. Deep Copy Linked List With Random Pointer
Each of the nodes in the linked list has another pointer pointing to a random node in the list or nu ...
- java.sql.BatchUpdateException: ORA-01691: Lob 段 CSASSSMBI.SYS_LOB0000076987C00003$$ 无法通过 128 (在表空间 HRDL_CSASS 中) 扩展
问题: 在tomcat日志信息中出现:java.sql.BatchUpdateException: ORA-01691: Lob 段 CSASSSMBI.SYS_LOB0000076987C00003 ...
- UML-类图-如何画引用类和集合？
1.画引用类 引用到了类时,需要画关联线,否则其他基本类型(int.string.date等)不画. 2.画集合 当然,方法1中可加入箭头.对应java代码: public class Sale { ...
- [原]调试实战——使用windbg调试DLL卸载时的死锁
原调试debugwindbg死锁deadlock 前言 最近我们的程序在退出时会卡住,调查发现是在卸载dll时死锁了.大概流程是这样的:我们的dll在加载的时候会创建一个工作线程,在卸载的时候,会设置 ...