Emulating a movable divider: Need to disable default dragging

StackOverflow https://stackoverflow.com/questions/8060674

문제

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?

도움이 되었습니까?

해결책

Firstly, to stop text being highlighted when dragging the divider:

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

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.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top