我试图调整第一个元素的大小，而不影响行中下一个元素的位置，例如，我希望第一个元素的宽度会影响下一个元素的宽度，从而不会将其推到左侧。
这是我已经有了的代码。
(function () {
var thElm;
var startOffset;
Array.prototype.forEach.call(
document.querySelectorAll("table th"),
function (th) {
th.style.position = 'relative';
var grip = document.createElement('div');
grip.innerHTML = " ";
grip.style.top = 0;
grip.style.right = 0;
grip.style.bottom = 0;
grip.style.width = '5px';
grip.style.position = 'absolute';
grip.style.cursor = 'col-resize';
grip.addEventListener('mousedown', function (e) {
thElm = th;
startOffset = th.offsetWidth - e.pageX;
});
th.appendChild(grip);
});
document.addEventListener('mousemove', function (e) {
if (thElm) {
thElm.style.width = startOffset + e.pageX + 'px';
}
});
document.addEventListener('mouseup', function () {
thElm = undefined;
});
})();
我的代码的工作示例。
(function () {
var thElm;
var startOffset;
Array.prototype.forEach.call(
document.querySelectorAll("table th"),
function (th) {
th.style.position = 'relative';
var grip = document.createElement('div');
grip.innerHTML = " ";
grip.style.top = 0;
grip.style.right = 0;
grip.style.bottom = 0;
grip.style.width = '5px';
grip.style.position = 'absolute';
grip.style.cursor = 'col-resize';
grip.addEventListener('mousedown', function (e) {
thElm = th;
startOffset = th.offsetWidth - e.pageX;
});
th.appendChild(grip);
});
document.addEventListener('mousemove', function (e) {
if (thElm) {
thElm.style.width = startOffset + e.pageX + 'px';
}
});
document.addEventListener('mouseup', function () {
thElm = undefined;
});
})();
table {
table-layout: fixed;
width: 100px;
border-width: 1px;
border-style: solid;
border-color: black;
border-collapse: collapse;
overflow-x: auto;
}
table tr {
box-sizing: content-box;
}
table th {
height: 50px;
width: 20px;
border-width: 1px;
border-style: solid;
border-color: black;
box-sizing: border-box;
user-select: none;
}
<table>
<thead>
<tr style="width: 100%;">
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 3</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
</tr>
</thead>
</table>
codepen https://codepen.io/yehudz/pen/KyqzKm
Thanks!
嘿伙计们我明白了。这是代码。
resizeable() {
let startOffset;
let thElements = this.container.querySelectorAll("th");
for(let i = 0; i < thElements.length; i++) {
let currentElement = thElements[i];
currentElement.style.position = 'relative';
let grip = document.createElement('div');
grip.innerHTML = " ";
grip.style.top = 0;
grip.style.right = 0;
grip.style.bottom = 0;
grip.style.width = '5px';
grip.style.position = 'absolute';
grip.style.cursor = 'col-resize';
currentElement.appendChild(grip);
EventManager.on(grip, 'mousedown', (e)=> {
let nextItem = thElements[i + 1];
let currentElement = thElements[i];
let originalNextItemWidth = nextItem.getBoundingClientRect().width;
let originalCurrentItemWidth = currentElement.getBoundingClientRect().width;
startOffset = currentElement.offsetWidth - e.pageX;
EventManager.on(document.body, 'mousemove', (e)=> {
// Subtract that difference from the next items width
if (currentElement) {
currentElement.style.width = startOffset + e.pageX + 'px';
let offset = originalCurrentItemWidth - currentElement.getBoundingClientRect().width;
nextItem.style.width = (originalNextItemWidth + offset) + 'px';
}
});
});
EventManager.on(document.body, 'mouseup', (e)=> {
EventManager.off(document.body, 'mousemove');
currentElement = null;
});
}
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
