我使用html5 + css3 + javascript来制作gui应用程序。我试图模仿一个结构,其中寡妇被分成两个部分,中间有一个可移动的窗格。当用户拖动窗格时,窗格应该跟随鼠标光标,改变两侧的两个部分的大小。到目前为止,我想出了以下代码。
<html>
<head>
<style>
.container {
display : inline-block;
height : 500px;
}
.pane {
display : inline-block;
width : 10px;
height : 100%;
vertical-align : top;
color : #806000;
background-color : #b0d0c0;
}
.resbox {
display : inline-block;
width : 200px;
height : 100%;
background-color : #707070;
}
</style>
<script async="true">
function dragStart(e, left, right){
mousedown = true;
x = e.clientX
dragOffsetLeft = document.getElementById(left).offsetWidth - x;
dragOffsetRight = document.getElementById(right).offsetWidth + x;
};
function dragRelease(){
mousedown = false;
};
function drag(e, left, right){
if(!mousedown){return}
x = e.clientX
tmpLeft = dragOffsetLeft + x
tmpRight = dragOffsetRight - x
if(tmpLeft < 30 || tmpRight < 30){return}
document.getElementById(left).style.width = tmpLeft + 'px';
document.getElementById(right).style.width = tmpRight + 'px';
};
</script>
</head>
<body>
<span class="container">
<span id="left" class="resbox">Left</span>
<span class="pane" onmousedown="dragStart(event, 'left', 'right');" onmousemove="drag(event, 'left', 'right');" onmouseout="dragRelease();" onmouseup="dragRelease();"></span>
<span id="right" class="resbox">Right</span>
</span>
</body>
</html>
它有时会起作用,但有时候(特别是在我完成拖动窗格之后),中间的窗格会像图片一样拖出位置,并阻止了预期的功能。我在<script>...</script>
中添加了以下内容,但它没有任何帮助。
window.onload = function(){
document.getElementsByClassName('pane')[0].draggable = false;
};
我可以就如何禁用默认拖动提出建议吗?我使用的是firefox 7.0.1和chrome 15.0.874.106。是否还有其他任何可以对此代码进行的重要点,以使运动更加稳定和平稳?
答案 0 :(得分:1)
首先,在拖动分隔符时停止突出显示文本:
onmousedown="dragStart(event, 'left', 'right'); return false;"
// Returning false stops the default dragging
当光标移动太快时,这仍然不起作用。这是因为分隔线太薄,光标可以通过快速移动来退出。
我在这里快速解决了这个问题:http://jsfiddle.net/np56t/1/
我建议您尝试使用jQuery UI Draggable来正确执行此操作。