为什么我的javascript拖动调整大小框没有'没有按预期工作
Why my javascript drag resize box doesn't work as expected
这是我的代码。我更喜欢在没有jquery的情况下纯粹在javascript上创建一个调整大小框。代码使我能够在拖动时调整段落的宽度，但它似乎没有按预期工作。
<html>
<head>
<style>
div{
border: 1px solid black;
width: 500px;
height: 500px;
padding: 0px;
margin: 0px;
}
p{
border: 1px solid red;
position: absolute;
height: 200px;
width: 200px;
padding: 0px;
margin: 0px;
}
</style>
<script>
window.onload = function(){
document.body.onmousedown = function(event){
var mouseStartX = event.clientX;
var mouseStartY = event.clientY;
var div = document.getElementsByTagName("div");
var para = document.createElement("p");
div[0].appendChild(para);
document.styleSheets[0].cssRules[1].style.top = mouseStartY;
document.styleSheets[0].cssRules[1].style.left = mouseStartX;
document.body.onmousemove = function(event){
if(para){
document.styleSheets[0].cssRules[1].style.width = event.clientY - mouseStartY;
}
}
document.body.onmouseup = function(){
div[0].removeChild(para);
}
};
};
</script>
</head>
<body>
<div>
</div>
</body>
</html>
我的问题是，当我向右拖动鼠标时，我希望p会继续放大，但它只有在我拖动到某个点时才起作用
我只能试着回答你的问题，因为你的措辞有点模糊。然而，我将您的代码复制并粘贴到一个测试HTML文件中，并将其加载到我的web浏览器中，我可以猜测您遇到的问题是什么。问题是p在拖动光标时会放大，但它不会一直放大，因此右边框与光标对齐。
首先，在您的document.body.onmousemove函数中：
document.body.onmousemove = function (event) {
if (para) {
document.styleSheets[0].cssRules[1].style.width = event.clientY - mouseStartY;
}
}
当我认为你指的是event.clientX和mouseStartX时，你写了event.clientY和mouseStartY。然而，您也在修改CSS规则，因此必须将单位px附加到宽度的末尾：
document.body.onmousemove = function (event) {
if (para) {
document.styleSheets[0].cssRules[1].style.width = (event.clientX - mouseStartX) + "px";
// The parentheses are technically not required; I put them there for clarity.
}
}
这两行代码也是如此：
document.styleSheets[0].cssRules[1].style.top = mouseStartY;
document.styleSheets[0].cssRules[1].style.left = mouseStartX;
你忘了把单位包括在内。只需在每行末尾前添加+ "px"即可：
document.styleSheets[0].cssRules[1].style.top = mouseStartY + "px";
document.styleSheets[0].cssRules[1].style.left = mouseStartX + "px";
此外，最好只删除window.onmouseup函数中的window.onmousemove和window.onmouseup，而不是在window.onmousemove函数中检查para。即使从div中删除了para，其计算结果仍然为true。
最后，您可以使用para.style.width而不是document.styleSheets[0].cssRules[1].style.width直接编辑para的样式，而不是通过document.styleSheets[0].cssRules[1]修改样式表。
我把你的window.onload函数重写成这样：
window.onload = function(){
document.body.onmousedown = function(event){
var mouseStartX = event.clientX,
mouseStartY = event.clientY,
div = document.getElementsByTagName("div"),
para = document.createElement("p");
div[0].appendChild(para);
para.style.top = mouseStartY + "px";
para.style.left = mouseStartX + "px";
document.body.onmousemove = function(event){
para.style.width = event.clientX - mouseStartX + "px";
//para.style.height = event.clientY - mouseStartY + "px";
// Uncomment the line above if you want to drag the height, too.
}
document.body.onmouseup = function(){
div[0].removeChild(para);
document.body.onmousemove = null;
document.body.onmouseup = null;
}
};
};
使用：
document.body.onmousemove = function (event) {
if (para) {
document.styleSheets[0].cssRules[1].style.width = event.clientX - mouseStartX;
}
}
而不是：
document.body.onmousemove = function (event) {
if (para) {
document.styleSheets[0].cssRules[1].style.width = event.clientY - mouseStartY;
}
}
否则，p元素将仅在垂直移动时调整大小，而不是在水平移动时。
跨浏览器兼容的解决方案，同时在所有四个象限中使用窗口滚动偏移和鼠标移动：
window.onload = function () {
var div = document.getElementsByTagName("div")[0];
var para = null, mouseStartX, mouseStartY; //top & left coordinates of paragraph
document.body.onmousedown = function (event) {
if (para) {
return;
}
event = event || window.event; // for IE8/7 http://stackoverflow.com/questions/7790725/javascript-track-mouse-position#7790764
// https://developer.mozilla.org/en-US/docs/Web/API/window.scrollY#Notes
var scrollX = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
var scrollY = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
mouseStartX = event.clientX + scrollX;
mouseStartY = event.clientY + scrollY;
para = document.createElement("p");
div.appendChild(para);
para.style.top = mouseStartY + 'px';
para.style.left = mouseStartX + 'px';
para.style.width = '0px';
para.style.height = '0px';
};
document.body.onmousemove = function (event) {
if (!para) {
return;
}
event = event || window.event;
var scrollX = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
var scrollY = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
var mouseCurrentX = event.clientX + scrollX;
var mouseCurrentY = event.clientY + scrollY;
if (mouseCurrentX >= mouseStartX) {
para.style.left = mouseStartX + 'px';
para.style.width = (mouseCurrentX - mouseStartX) + 'px';
} else {
para.style.left = mouseCurrentX + 'px';
para.style.width = (mouseStartX - mouseCurrentX) + 'px';
}
if (mouseCurrentY >= mouseStartY) {
para.style.top = mouseStartY + 'px';
para.style.height = (mouseCurrentY - mouseStartY) + 'px';
} else {
para.style.top = mouseCurrentY + 'px';
para.style.height = (mouseStartY - mouseCurrentY) + 'px';
}
};
document.body.onmouseup = function () {
div.removeChild(para);
para = null;
};
};
http://jsfiddle.net/hMbCF/1/
http://jsfiddle.net/hMbCF/1/show/
相关文章：
- 我的shareService在angular 2中发送值工作正常，但当我渲染我的另一个组件时，会获得默认值
- 我的django模板布尔变量是't在javascript中按预期工作
- 为什么不是'我的JS滑块正在工作
- 为什么不是'我的函数在解析云代码中工作吗?当我在Angular和Express中测试时，它是有效的
- 为什么jquery悬停在jsfiddle中可以工作，而在我的html布局中却不能
- 为什么这个jQuery可以作为一个小提琴工作，但在我的网页上没有
- 为什么我的JavaScript在Safari上的严格模式下不能正常工作
- 由于某种原因，我的JavaScript函数无法工作
- 为什么获胜'我的自定义功能工作
- 我需要一个jQuery函数来只工作在700px以上的屏幕大小，无法在我的代码中发现错误
- 我的动画没有按预期工作
- 为什么不是't我的“;虚拟的“;阵列工作
- 为什么动态加载的事件在我的代码中不能正常工作
- 我的时间倒计时脚本在谷歌浏览器中工作正常，但在其他浏览器中打开时它显示为南楠
- 关于使用.className的建议，目前还没有;我不能在我的圈子里工作
- onbeforeunload事件在我的代码中没有触发，但其他示例可以工作
- 如何获得所需的自动对焦验证以在 html 表单上工作?- 我的尝试无法验证
- 为什么不工作我的函数xmlParser().请帮帮我
- 点击后不工作我的功能
- 不工作我的ajax调用函数myalert()
