我正在尝试在
JavaScript中构建一个可拖动的基于列的布局,并且使用它有点困难.
布局由3列(div)组成,每个列都有两个可拖动的div.我们的想法是绝对定位它们,当您拖动拖动器时,列的相应宽度和左侧值都会更新.
三列应该始终跨越浏览器的整个宽度(最右边的列是100%宽度),但是当调整浏览器大小时,其他两个应该保持静态(这就是为什么我使用px,而不是%) .
我的代码还没有工作,我对JavaScript比较新(这就是为什么我不想使用jQuery).
话虽如此,必须有一个更有效(和更清洁)的方法来实现这一点,使用更少的代码(没有达到$key).
如果任何拥有一些令人敬畏的JS技能的人都可以帮助我解决这个问题,我会非常感激.
这是我在http://jsfiddle.net/ZFwz5/3/工作的小提琴
这是代码:
HTML
<!-- colums -->
<div class="col colA"></div>
<div class="col colB"></div>
<div class="col colC"></div>
<!-- draggers -->
<div class="drag dragA" style="position: absolute; width: 0px; height: 100%; cursor: col-resize; left:100px;"><div></div></div>
<div class="drag dragB" style="position: absolute; width: 0px; height: 100%; cursor: col-resize; left: 300px;"><div></div></div>
CSS:
body {
overflow:hidden;
}
.col {
position: absolute;
height:100%;
left: 0;
top: 0;
overflow: hidden;
}
.colA {background:red;width:100px;}
.colB {background:green; width:200px; left:100px;}
.colC {background:blue; width:100%; left:300px;}
.drag > div {
background: 0 0;
position: absolute;
width: 10px;
height: 100%;
cursor: col-resize;
left: -5px;
}
和我可怕的JavaScript:
//variabe columns
var colA = document.querySelector('.colA');
var colB = document.querySelector('.colB');
var colC = document.querySelector('.colC');
//variable draggers
var draggers = document.querySelectorAll('.drag');
var dragA = document.querySelector(".dragA");
var dragB = document.querySelector(".dragB");
var dragging = false;
function drag() {
var dragLoop;
var t = this;
var max;
var min;
if (dragging = true) {
if (this == dragA) {
min = 0;
max = dragB.style.left;
} else {
min = dragA.style.left;
max = window.innerWidth;
}
dragLoop = setInterval(function () {
var mouseX = event.clientX;
var mouseY = event.clientY;
if (mouseX >= max) {
mouseX = max;
}
if (mouseY <= min) {
mouseY = min;
}
t.style.left = mouseX;
updateLayout();
}, 200);
}
}
function updateLayout() {
var posA = dragA.style.left;
var posB = dragB.style.left;
colB.style.paddingRight = 0;
colA.style.width = posA;
colB.style.left = posA;
colB.style.width = posB - posA;
colC.style.left = posB;
colC.style.width = window.innerWidth - posB;
}
for (var i = 0; i < draggers.length; i++) {
draggers[i].addEventListener('mousedown', function () {
dragging = true;
});
draggers[i].addEventListener('mouseup', function () {
clearInterval(dragLoop);
dragging = false;
});
draggers[i].addEventListener('mouseMove', function () {
updateLayout();
drag();
});
}
最佳答案 我在这里看到了一些错误.首先,当鼠标悬停在该元素上时,mousemove事件仅在元素上触发.您可能更幸运在div.drag元素的父级上注册mousemove侦听器,然后在鼠标事件发生时计算鼠标在该父级内的位置,然后使用该位置调整列和拖动器的大小.
其次,通过使用setInterval注册函数,我不太确定你要做什么.注册事件监听器你做得很好;为什么不继续使用它们来改变DOM的状态?为什么要切换到基于轮询的机制? (并且传递给setInterval的函数无论如何都不会起作用 – 它引用一个名为event的变量,该变量在该上下文中是未定义的.)