javascript - 通过边缘调整元素 (li) 的大小

Question

我用一些基本代码创建了一个小提琴，请就调整大小功能、核心 Javascript ninjas 和 guru 提出建议

http://jsfiddle.net/developer11/ZGTL3/

<div id="bars">
<ul id="bars_3">
<li id="bars_3_0"><a id="resizer" href="javascript:;"></a></li>
</ul>
</div>

JavaScript 是

document.getElementById("bars_3_0").firstChild.addEventListener("mousedown", function() {
event.preventDefault();
document.addEventListener("mousemove", mousemoveHandler);
}, false);

document.addEventListener("mouseup", function() {
document.removeEventListener("mousemove", mousemoveHandler);   
});

function mousemoveHandler() {
console.log('move');   
}

Answer 1

您可以尝试将标志设置为 true onmousedown并将其设置为 false on mouseup。然后，mousemove您可以更改元素的高度或位置以匹配当前鼠标位置。

在您的mousemove听众中，您可以检查您的mousedown标志以查看是否应该更新位置。

此页面可能会帮助您入门。

Answer 2

document.getElementById("bars_3_0").firstChild.onmousedown = function() {
        console.log('down');
    };

希望这可以解决您在提琴手代码中的问题。

document.getElementById("bars_3_0").firstChild.onmousedown=function() {
document.onmousemove=mousemoveHandler
};

document.onmouseup=function() {
document.onmousemove='';   
};

function mousemoveHandler() {
console.log('move');   
}