英文:
Resizing a box width from left to right using pure JS
问题
I am trying to make a box move and resize.
我正在尝试让一个框移动和调整大小。
I have perfected the moving part and the resizing for the right and bottom.
我已经完善了移动部分和右侧和底部的调整大小部分。
I am having an issue resizing left and top.
我在调整左侧和顶部时遇到问题。
Here are my initial vars ...
以下是我的初始变量...
var mousePosition;
var offset;
var wrSizeOffset, wlSizeOffset, hbSizeOffset;
var div;
var isDown = false;
var wlSizeDown, wrSizeDown, htSizeDown, hbSizeDown = false;
var divWidth, divHeight;
After that I check whether the box is on mouse down ...
之后，我检查鼠标是否按下了框...
div.addEventListener('mousedown', function(e){
isDown = true;
offset = {
x: div.offsetLeft - e.clientX,
y: div.offsetTop - e.clientY
}
// get width without px
divWidth = parseInt(div.style.width, 10);
});
And then I check mouse on move like so ...
然后我检查鼠标的移动...
document.addEventListener('mousemove', function(e){
mousePosition = {
x: e.clientX,
y: e.clientY
}
// move div while mouse is down
if(isDown){
div.style.left = (mousePosition.x + offset.x) + 'px';
div.style.top = (mousePosition.y + offset.y) + 'px';
}
// resize the div from left to right
// I am having no issues here
if(wrSizeDown){
div.style.width = divWidth + mousePosition.x - wrSizeOffset.x + 'px';
}
// resizing the div from right to left
// here is where I am having an issue ...
if(wlSizeDown){
div.style.width = divWidth - (mousePosition.x - wlSizeOffset.x) + 'px';
// specially the below line of code
div.style.left = divWidth + (mousePosition.x - wlSizeOffset.x) + 'px';
}
});
Whenever I resize from right to left the div jumps around like it's adding to the style.left
每当我从右侧调整大小到左侧时，框会像添加到style.left一样跳动。
How can I make this work?
我该如何使其工作？
Here is an example ...
以下是一个示例...
英文:
I am trying to make a box move and resize.
I have perfected the moving part and the resizing for the right and bottom.
I am having an issue resizing left and top.
Here are my initial vars ...
var mousePosition;
var offset;
var wrSizeOffset, wlSizeOffset, hbSizeOffset;
var div;
var isDown = false;
var wlSizeDown, wrSizeDown, htSizeDown, hbSizeDown = false;
var divWidth, divHeight;
After that I check whether the box is on mouse down ...
div.addEventListener('mousedown', function(e){
isDown = true;
offset = {
x: div.offsetLeft - e.clientX,
y: div.offsetTop - e.clientY
}
// get width without px
divWidth = parseInt(div.style.width, 10);
});
And then I check mouse on move like so ...
document.addEventListener('mousemove', function(e){
mousePosition = {
x: e.clientX,
y: e.clientY
}
// move div while mouse is down
if(isDown){
div.style.left = (mousePosition.x + offset.x) + 'px';
div.style.top = (mousePosition.y + offset.y) + 'px';
}
// resize the div from left to right
// I am having no issues here
if(wrSizeDown){
div.style.width = divWidth + mousePosition.x - wrSizeOffset.x + 'px';
}
// resizing the div from right to left
// here is where I am having an issue ...
if(wlSizeDown){
div.style.width = divWidth - (mousePosition.x - wlSizeOffset.x) + 'px';
// specially the below line of code
div.style.left = divWidth + (mousePosition.x - wlSizeOffset.x) + 'px';
}
});
Whenever I resize from right to left the div jumps around like it's adding to the style.left
How can I make this work?
Here is an example ...
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var mousePosition;
var offset;
var wrSizeOffset, wlSizeOffset, hbSizeOffset;
var div;
var isDown = false;
var wlSizeDown, wrSizeDown, htSizeDown, hbSizeDown = false;
var divWidth, divHeight;
div = document.createElement('div');
div.style.position = 'relative';
div.style.left = '100px';
div.style.top = '100px';
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor = 'red';
div.style.border = '1px solid black';
wrSize = document.createElement('div');
wrSize.style.position = 'absolute';
wrSize.style.right = '-10px';
wrSize.style.top = '40px';
wrSize.style.width = '20px';
wrSize.style.height = '20px';
wrSize.style.backgroundColor = 'black';
wrSize.style.border = '1px solid black';
wlSize = document.createElement('div');
wlSize.style.position = 'absolute';
wlSize.style.left = '-10px';
wlSize.style.top = '40px';
wlSize.style.width = '20px';
wlSize.style.height = '20px';
wlSize.style.backgroundColor = 'black';
wlSize.style.border = '1px solid black';
htSize = document.createElement('div');
htSize.style.position = 'absolute';
htSize.style.left = '40px';
htSize.style.top = '-10px';
htSize.style.width = '20px';
htSize.style.height = '20px';
htSize.style.backgroundColor = 'black';
htSize.style.border = '1px solid black';
hbSize = document.createElement('div');
hbSize.style.position = 'absolute';
hbSize.style.left = '40px';
hbSize.style.bottom = '-10px';
hbSize.style.width = '20px';
hbSize.style.height = '20px';
hbSize.style.backgroundColor = 'black';
hbSize.style.border = '1px solid black';
document.body.appendChild(div);
div.appendChild(wrSize);
div.appendChild(wlSize);
div.appendChild(htSize);
div.appendChild(hbSize);
div.addEventListener('mousedown', function(e){
isDown = true;
offset = {
x: div.offsetLeft - e.clientX,
y: div.offsetTop - e.clientY
}
});
wrSize.addEventListener('mousedown', function(e){
wrSizeDown = true;
wrSizeOffset = {
x: e.clientX,
y: e.clientY
}
divWidth = parseInt(div.style.width, 10);
});
wlSize.addEventListener('mousedown', function(e){
wlSizeDown = true;
wlSizeOffset = {
x: e.clientX,
y: e.clientY
}
divWidth = parseInt(div.style.width, 10);
console.log(divWidth);
console.log(wlSizeOffset.x);
});
hbSize.addEventListener('mousedown', function(e){
hbSizeDown = true;
hbSizeOffset = {
x: e.clientX,
y: e.clientY
}
divHeight = parseInt(div.style.height, 10);
});
document.addEventListener('mouseup', function(e){
isDown = false;
wrSizeDown = false;
wlSizeDown = false;
hbSizeDown = false;
});
document.addEventListener('mousemove', function(e){
mousePosition = {
x: e.clientX,
y: e.clientY
}
if(isDown && (!wrSizeDown && !wlSizeDown && !hbSizeDown)){
div.style.left = (mousePosition.x + offset.x) + 'px';
div.style.top = (mousePosition.y + offset.y) + 'px';
}
if(wrSizeDown){
div.style.width = divWidth + mousePosition.x - wrSizeOffset.x + 'px';
}
if(hbSizeDown){
div.style.height = divHeight + mousePosition.y - hbSizeOffset.y + 'px';
}
if(wlSizeDown){
div.style.width = divWidth - wlSizeOffset.x + mousePosition.x + 'px';
div.style.left = divWidth + wlSizeOffset.x - mousePosition.x + 'px';
}
});
<!-- language: lang-css -->
body {
margin: 0px;
}
* {
box-sizing: border-box;
}
#box{
position: absolute;
display: block;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: #d80000;
border: 1px solid #000;
}
<!-- end snippet -->
答案1
得分: 1
我不看到顶部的事件监听器。但是当你按住wlSizeDown时，需要这样计算左边：
div.style.left = divWidth - (wlSizeOffset.x - mousePosition.x) + 'px';
对于htSizeDown事件监听器被创建：
div.style.height = divHeight - mousePosition.y + htSizeOffset.y + 'px';
div.style.top = divHeight + mousePosition.y - htSizeOffset.y + 'px';
英文:
I don't see an eventlistener for the top at all. But when you're holding down wlSizeDown, you need to calculate left like so:
div.style.left = divWidth - (wlSizeOffset.x - mousePosition.x) + 'px';
and for htSizeDown event listener is created:
div.style.height = divHeight - mousePosition.y + htSizeOffset.y + 'px';
div.style.top = divHeight + mousePosition.y - htSizeOffset.y + 'px';
</details>
# 答案2
**得分**: 0
我已找到解决方案。
以下是代码...
```javascript
var mousePosition;
var offset;
var isDown = false;
var isResize = false;
var div, resize;
var divWidth, divHeight;
var originalWidth, originalHeight; // 加入了这一行
div = document.createElement('div');
resize = document.createElement('div');
div.setAttribute('id', 'div');
resize.setAttribute('id', 'resize');
document.body.appendChild(div);
div.appendChild(resize);
div.addEventListener('mousedown', function(e){
isDown = true;
offset = {
x: div.offsetLeft - e.clientX,
y: div.offsetTop - e.clientY
}
});
document.addEventListener('mouseup', function(e){
isDown = false;
isResize = false;
});
resize.addEventListener('mousedown', function(e){
isResize = true;
resizeOffset = {
x: e.clientX,
y: e.clientY
}
divWidth = div.getBoundingClientRect().width;
originalWidth = div.getBoundingClientRect().left; // 在这里我弄错了
});
document.addEventListener('mousemove', function(e){
mousePosition = {
x: e.clientX,
y: e.clientY
}
if(isDown && !isResize){
div.style.left = (mousePosition.x + offset.x) + 'px';
div.style.top = (mousePosition.y + offset.y) + 'px';
}
if(isResize){
div.style.width = divWidth - mousePosition.x + resizeOffset.x + 'px';
div.style.left = originalWidth + mousePosition.x - resizeOffset.x + 'px'; // 我添加了originalWidth而不是divWidth
}
});
```
```css
body{
margin: 0px;
}
*{
box-sizing: border-box;
}
#div{
position: relative;
display: block;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: #ce4257;
border: 5px solid #000;
border-radius: 5px;
}
#resize{
position: absolute;
display: block;
top: calc(50% - 30px);
left: -15px;
width: 30px;
height: 30px;
background-color: #000;
border-radius: 5px;
}
```
请阅读注释以了解我所做的更改。
如果您在理解解决方案方面遇到问题，请留下评论，我会提供帮助。
谢谢，
Farris
<details>
<summary>英文:</summary>
I have found the solution.
Here is the code ...
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var mousePosition;
var offset;
var isDown = false;
var isResize = false;
var div, resize;
var divWidth, divHeight;
var originalWidth, originalHeight; // added this too
div = document.createElement('div');
resize = document.createElement('div');
div.setAttribute('id', 'div');
resize.setAttribute('id', 'resize');
document.body.appendChild(div);
div.appendChild(resize);
div.addEventListener('mousedown', function(e){
isDown = true;
offset = {
x: div.offsetLeft - e.clientX,
y: div.offsetTop - e.clientY
}
});
document.addEventListener('mouseup', function(e){
isDown = false;
isResize = false;
});
resize.addEventListener('mousedown', function(e){
isResize = true;
resizeOffset = {
x: e.clientX,
y: e.clientY
}
divWidth = div.getBoundingClientRect().width;
originalWidth = div.getBoundingClientRect().left; // here is where i missed up
});
document.addEventListener('mousemove', function(e){
mousePosition = {
x: e.clientX,
y: e.clientY
}
if(isDown && !isResize){
div.style.left = (mousePosition.x + offset.x) + 'px';
div.style.top = (mousePosition.y + offset.y) + 'px';
}
if(isResize){
div.style.width = divWidth - mousePosition.x + resizeOffset.x + 'px';
div.style.left = originalWidth + mousePosition.x - resizeOffset.x + 'px'; // added originalWidth instead of divWidth
}
});
<!-- language: lang-css -->
body{
margin: 0px;
}
*{
box-sizing: border-box;
}
#div{
position: relative;
display: block;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: #ce4257;
border: 5px solid #000;
border-radius: 5px;
}
#resize{
position: absolute;
display: block;
top: calc(50% - 30px);
left: -15px;
width: 30px;
height: 30px;
background-color: #000;
border-radius: 5px;
}
<!-- end snippet -->
Please read the comments to understand what I have done.
If you are facing problems understanding the solution please comment and I will help.
Thank you,
Farris
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论