仿真可移動分隔線：需要禁用默認拖拽

我使用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。是否還有其他可以對此代碼作出讓人印象深刻的要點，以使運動更加穩定和流暢？

來源

2011-11-09 sawa

首先，停止文本拖曳分隔時被強調：

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

這仍然光標移動速度過快時，無法正常工作。這是因爲分隔線太細，光標可以通過快速移動而退出。

我做了一個快速的解決方法爲這個位置：http://jsfiddle.net/np56t/1/

我建議嘗試使用jQuery UI Draggable正確地做到這一點。

來源

2011-11-09 06:49:15 grc

感謝您花時間檢查我的代碼。我試過你的代碼。它完美的作品。 – sawa

仿真可移動分隔線：需要禁用默認拖拽

回答

相關問題