1
私はhtml5 + css3 + javascriptを使用してGUIアプリケーションを作成しています。私は、未亡人が2つのセクションに分割され、途中に可動ペインがある構造をエミュレートしようとしています。ユーザーがペインをドラッグすると、ペインはマウスカーソルに追従し、両側の2つのセクションのサイズが変更されます。これまでは、以下のコードを思いついた。移動可能な区画をエミュレートする：デフォルトのドラッグを無効にする必要があります
<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を使用しています。動きをより安定して滑らかにするために、このコードを作ることができる他のimporovententポイントがありますか？カーソルが速すぎて移動するときにこれはまだ動作しません
onmousedown="dragStart(event, 'left', 'right'); return false;"
// Returning false stops the default dragging
：仕切りをドラッグしたときに強調表示されたテキストを停止するにはまず
私のコードをチェックしていただきありがとうございます。私はあなたのコードを試しました。それは完全に動作します。 – sawa