我有以下脚本，当拖动灰色处理程序（左上角）div重新调整大小时，鼠标div的释放位于错误的位置（左边距）。
我需要修复它，就像右下角的处理程序一样。
可能是什么问题？它似乎与event.clientX有关，它被设置为0。
注意：单击div以激活处理程序。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#target {
background-color: lightgreen;
}
.selected {
border: 1px dashed red;
}
.handler {
position: absolute;
width: 10px;
height: 10px;
background-color: gray;
}
</style>
<script>
window.App = {
config: {
elm: 'target',
elmInnerContent: 'inner-content',
x: null,
y: null,
w: null,
h: null,
handlerSize: 10
},
start: function () {
this.addEventListeners();
},
addEventListeners: function () {
var elm = document.getElementById(this.config.elm);
elm.addEventListener('click', function () {
if (!elm.classList.contains('selected')) {
elm.classList.add('selected');
this.getDimensions();
this.createHandlers();
this.setPositionHandlers();
this.addEventListenersHandlers();
} else {
elm.classList.remove('selected');
this.removeHandlers();
}
}.bind(this));
},
removeHandlers: function () {
var elm = document.getElementById('handler-wrapper');
elm.parentElement.removeChild(elm);
},
getDimensions: function () {
var elm = document.getElementById(this.config.elm);
this.config.x = elm.offsetLeft;
this.config.y = elm.offsetTop;
this.config.w = elm.clientWidth;
this.config.h = elm.clientHeight;
},
createHandlers: function () {
var wrpHandlers = document.createElement('div'),
htmlHandlers = '<div id="tl" class="tl handler" draggable="true"> </div>';
htmlHandlers += '<div id="tr" class="tr handler" draggable="true"> </div>';
htmlHandlers += '<div id="bl" class="bl handler" draggable="true"> </div>';
htmlHandlers += '<div id="br" class="br handler" draggable="true"> </div>';
wrpHandlers.id = "handler-wrapper";
wrpHandlers.innerHTML = htmlHandlers;
var elm = document.getElementById(this.config.elm);
elm.appendChild(wrpHandlers);
},
setPositionHandlers: function () {
this.getDimensions();
var elmTl = document.getElementById('tl'),
elmTr = document.getElementById('tr'),
elmBl = document.getElementById('bl'),
elmBr = document.getElementById('br');
elmTl.style.top = this.config.handlerSize * -1 + 'px';
elmTl.style.left = this.config.handlerSize * -1 + 'px';
elmTr.style.top = this.config.handlerSize * -1 + 'px';
elmTr.style.left = this.config.w + 'px';
elmBl.style.top = this.config.h + 'px';
elmBl.style.left = this.config.handlerSize * -1 + 'px';
elmBr.style.top = this.config.h + 'px';
elmBr.style.left = this.config.w + 'px';
},
addEventListenersHandlers: function () {
var elmTl = document.getElementById('tl'),
elmTr = document.getElementById('tr'),
elmBl = document.getElementById('bl'),
elmBr = document.getElementById('br');
elmTl.addEventListener('drag', function (event) {
this.resize('tl', event);
}.bind(this));
elmTr.addEventListener('drag', function (event) {
this.resize('tr', event);
}.bind(this));
elmBl.addEventListener('drag', function (event) {
this.resize('bl', event);
}.bind(this));
elmBr.addEventListener('drag', function (event) {
this.resize('br', event);
}.bind(this));
},
resize: function (handler, event) {
var elm = document.getElementById(this.config.elm);
switch (handler) {
case 'tl':
var marginR = elm.offsetLeft + elm.clientWidth,
newW = marginR - event.clientX,
xPos = event.clientX;
elm.style.left = xPos + 'px';
elm.style.width = newW + 'px';
this.setPositionHandlers();
break;
case 'tr':
break;
case 'bl':
break;
case 'br':
var newW = event.clientX - this.config.x,
newH = event.clientY - this.config.y;
elm.style.width = newW + 'px';
elm.style.height = newH + 'px';
this.setPositionHandlers();
break;
}
},
};
</script>
<title></title>
</head>
<body onload="window.App.start();">
<div id="target" style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px;">
<div id="inner-content">
Some text here
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
在resize函数case 'tl'中：你必须对top＆amp ;;做同样的事情。身高，你为左派和左右做了什么宽度。
marginT = elm.offsetTop + elm.clientHeight,
newH = marginT - event.clientY,
yPos = event.clientY;
和
elm.style.top = yPos + 'px';
elm.style.height = newH + 'px';
编辑：对不起，我想第一次误读了一些东西。 仅供参考：您的代码在Safari中运行良好，但在Chrome中，我看到了您的问题。
编辑2：我不知道是什么原因造成的。但是如果你只是检查xPos >= 0，你可以解决它。我知道这是一个丑陋的黑客，但这是我所拥有的最好的。 Fiddle已更新。