通过调整元素(li）的大小's边缘

Resize an element (li) by it's edges

本文关键字：边缘 调整 元素 li      更新时间：2023-09-26

我已经创建了一些基本代码，请建议调整大小功能、核心Javascript忍者和大师

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');   
}

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

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

此页面可能有助于您入门。

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

希望这能解决你在fiddler代码中的问题。

document.getElementById("bars_3_0").firstChild.onmousedown=function() {
document.onmousemove=mousemoveHandler
};
document.onmouseup=function() {
document.onmousemove='';   
};
function mousemoveHandler() {
console.log('move');   
}
相关文章：