js 拖动--动态改变div的宽高大小

index.html 如下：（可以新建一个index.html文件直接复制，打开运行）

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

#panel {

position: absolute;

width: 200px;

height: 200px;

background: green;

}

#dragIcon {

position: absolute;

top: 0;

right: 0;

width: 20px;

height: 20px;

background: yellow;

cursor: pointer;

}

</style>

window.onload = function () {

// 1. 获取两个大小div

var oPanel = document.getElementById('panel');

var oDragIcon = document.getElementById('dragIcon');

// 定义4个变量

var disX = 0;//鼠标按下时光标的X值

var disY = 0;//鼠标按下时光标的Y值

var disW = 0; //拖拽前div的宽

var disH = 0; // 拖拽前div的高

//3. 给小div加点击事件

oDragIcon.onmousedown = function (ev) {

var ev = ev || window.event;

disX = ev.clientX; // 获取鼠标按下时光标x的值

disY = ev.clientY; // 获取鼠标按下时光标Y的值

disW = oPanel.offsetWidth; // 获取拖拽前div的宽

disH = oPanel.offsetHeight; // 获取拖拽前div的高

document.onmousemove = function (ev) {

var ev = ev || window.event;

//拖拽时为了对宽和高限制一下范围，定义两个变量

var W = ev.clientX - disX + disW;

var H = ev.clientY - disY + disH;

if (W < 100) {

W = 100;

}

if (W > 1800) {

W = 1800;

}

if (H < 100) {

H = 100;

}

if (H > 1000) {

H = 1000;

}

oPanel.style.width = W + 'px';// 拖拽后物体的宽

oPanel.style.height = H + 'px';// 拖拽后物体的高

}

document.onmouseup = function () {

document.onmousemove = null;

document.onmouseup = null;

}

</script>

<body>

</div>

</body>

</html>

js 拖动--动态改变div的宽高大小相关推荐

js 实现上下拖动改变父 div 的高度，左右上下拖动动态分割孩子的宽高
1. 需求实现父 div 里面左右,上下动态分割 div,并上下改变父 div 的高度,并且宽和高都是按百分比(如图) . 2. 实现原理 2.1 父布局 <div class='hj-wr ...
js动态设置元素的宽高
js动态设置元素的宽高实现代码: var html = document.getElementsByTagName('html')[0];var dl_second_nav=document.get ...
jquery动态改变div宽度和高度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
动态修改RelativeLayout的宽高
我们经常会动态修改RelativeLayout的宽高,这样的代码,比较简单,就是修改Relativelayout的LayoutParams就可以．代码一般如下: RelativeLayout ss = ...
html如何修改span的值,如何动态改变div span的内容
本文介绍了javascript动态改变div span的内容的教程,希望能帮助到大家先看一个实例对span的控制与div类似,但是它是按照行来显示的,看下面的代码: function chage ...
动态计算Label的宽高+文字设置
iOS7之后苹果推荐使用boundingRectWithSize:的方法来计算文字的宽高,使用这个方法就能动态计算文字的宽高,而不用自己去预算文字需要多宽多高下面,我们就具体看看这个方法如何使用: ...
[echarts] 图表自适应宽高大小
<div class="echart-wrap" :ref="wrapId" :id="wrapId" ><div :re ...
js设置canvas的宽高（动态设置canvas的宽高）
设置canvas的宽高有两种方式: 1:在html的canvas标签中设置宽高 <body><canvas id="canvas" width="300 ...
动态设置video的宽高的方法，js设置和CSS设置
一.csss设置 html: <div class="wrap"><video controls="controls" class=" ...

js 拖动--动态改变div的宽高大小

js 拖动--动态改变div的宽高大小相关推荐

最新文章

热门文章