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

デフォルトのドラッグを無効にする方法についての提案はありますか？Firefox7.0.1とChrome15.0.874.106を使用しています。動きをより安定してスムーズにするために、このコードに加えることができる他の重要なポイントはありますか？

4

1 に答える 1

1

まず、仕切りをドラッグするときにテキストが強調表示されないようにするには：

onmousedown="dragStart(event, 'left', 'right'); return false;"
// Returning false stops the default dragging

カーソルの移動が速すぎる場合でも、これは機能しません。これは、仕切りが薄すぎて、カーソルがすばやく移動して仕切りを終了できるためです。

私はここでこれの簡単な回避策を作成しました：http：//jsfiddle.net/np56t/1/

jQueryUIDraggableを使用して適切に実行することをお勧めします。

于 2011-11-09T06:49:15.113 に答える