模拟可移动分隔线：需要禁用默认拖动
我正在使用 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>
有时它可以工作，但有时（特别是在我拖动完窗格之后），中间的窗格像图片一样拖出位置，并且预期的功能被阻止。我在 中添加了以下内容，但没有任何帮助。
window.onload = function(){
document.getElementsByClassName('pane')[0].draggable = false;
};
我可以提供有关如何禁用默认拖动的建议吗？我使用的是 Firefox 7.0.1 和 chrome 15.0.874.106。这段代码还有其他的改进点可以让动作更加稳定流畅吗？
I am using html5 + css3 + javascript to make gui applications. I am trying to emulate a structure where a widow is divided into two sections with a movable pane in the middle. As the user drags the pane, the pane is expected to follow the mouse cursor, changing the size of the two sections on two sides. So far, I came up with the following code.
<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>
It works sometimes, but other times (especially after I have once done dragging of the pane), the pane in the middle drags out of the position like a picture, and the intended feature is blocked. I added the following within <script>...</script>, but it is of no help.
window.onload = function(){
document.getElementsByClassName('pane')[0].draggable = false;
};
Can I have suggestions on how to disable the default dragging? I am using firefox 7.0.1 and chrome 15.0.874.106. Are there any other imporovoment points that can be made to this code to make the movement more stable and smooth?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
首先，在拖动分隔线时停止突出显示文本：
当光标移动太快时，这仍然不起作用。这是因为分隔线太细，光标可以通过快速移动来退出它。
我在这里为此做了一个快速解决方法： http://jsfiddle.net/np56t/1/
我建议尝试使用 jQuery UI Draggable 来正确执行此操作。
Firstly, to stop text being highlighted when dragging the divider:
This still doesn't work when the cursor moves too fast. This is because the divider is too thin and the cursor can exit it by moving quickly.
I made a quick workaround for this here: http://jsfiddle.net/np56t/1/
I'd suggest trying to use jQuery UI Draggable to do it properly.