使用纯 JavaScript 的可拖动列

Question

我正在尝试在 JavaScript 中构建一个基于可拖动列的布局，但遇到了一些困难。

布局由 3 列 (div) 组成，每个列有两个可拖动的 div。这个想法是它们是绝对定位的，当您拖动拖动器时，列的相应宽度和左侧值都会更新。

三列应该总是跨越浏览器的整个宽度（最右边的列是 100% 宽度），但是当浏览器调整大小时，另外两列应该默认保持静态（这就是我使用 px 的原因，不是 %)。

我的代码还没有工作，我对 JavaScript 比较陌生（这就是我不想使用 jQuery 的原因）。

话虽如此，必须有一种更有效（和更简洁）的方法来实现这一点，并且可以使用更少的代码（无需使用 $ 键）。

如果有一些出色的 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();
    });
}

Answer 1

我在这里发现了一些问题。首先，mousemove 事件仅在鼠标悬停在该元素上时触发该元素。在div.drag 元素的父 上注册mousemove 监听器可能会更好，然后在发生鼠标事件时计算鼠标在该父元素中的位置，然后使用该位置调整列的大小和你的拖拉机。

其次，我不太确定你想通过setInterval 注册一个函数来做什么。你在注册事件监听器方面做得很好；为什么不继续使用它们来改变你的 DOM 的状态呢？为什么要切换到基于轮询的机制？ （而且你传递给setInterval 的函数无论如何都不会工作——它引用了一个名为event 的变量，在那个上下文中它是未定义的。）

Answer 2

这只是一个小例子......我希望它可以帮助你:)

window.onload = function() {    

var myDiv = document.getElementById('myDiv');

function show_coords(){
var monitor = document.getElementById('monitor');
var x = event.clientX - myDiv.clientWidth / 2;
var y = event.clientY - myDiv.clientWidth / 2;
monitor.innerText = "X: " + x + "\n" + "Y: " + y;
myDiv.style.left = x + "px";
myDiv.style.top = y + "px";
}

document.onmousemove = function(){
    if(myDiv.innerText == "YES"){show_coords();}
}

myDiv.onmousedown = function(){
    myDiv.innerText = "YES";
}
myDiv.onmouseup = function(){
    myDiv.innerText = "NO";
}

}