2016-04-22 73 views
0

我需要帶鼠標按下事件的可滾動div。例如,請參閱此鏈接: https://sapui5.netweaver.ondemand.com/explored.html#/sample/sap.ui.comp.sample.valuehelpdialog.example1/preview當鼠標向下並移動時滾動/拖動div中的值

如果所選值將溢出,那麼我們可以滾動/拖動div,我們也可以看到其他值。

Before Scroll Div After Scroll Div

+0

你是什麼意思拖動,我看不出它在這裏:https://sapui5.netweaver.ondemand.com/explored.html# /sample/sap.ui.comp.sample.valuehelpdialog.example1/preview –

+0

哦,你的意思是模態窗口? –

+0

在輸入字段中有一些選定的項目在那裏..在該區域鼠標向下並將鼠標移動到右邊......然後你可以看到不可見的值 –

回答

0

試試這個:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Draggable - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
     #draggable { 
      width: 150px; 
      height: 150px; 
      padding: 0.5em; 
     } 
     .scrollable{ 
      overflow-y:scroll; 
      width: 150px; 
      height: 150px; 
     } 
    </style> 
    <script> 
     $(function() { 
      $("#draggable").draggable(); 
     }); 
    </script> 
</head> 
<body> 

    <div id="draggable" class="ui-widget-content"> 
     <div class="scrollable"> 
      <table id="t1"> 
       <tr class="item"> 
        <td>Item </td> 
       </tr> 
       <tr class="item"> 
        <td>Item </td> 
       </tr> 
       <tr class="item"> 
        <td>Item </td> 
       </tr> 
       <tr class="item"> 
        <td>Item </td> 
       </tr> 
       <tr class="item"> 
        <td>Item </td> 
       </tr> 
       <tr class="item"> 
        <td>Item </td> 
       </tr> 
       <tr class="item"> 
        <td>Item </td> 
       </tr> 
       <tr class="item"> 
        <td>Item </td> 
       </tr> 
       <tr class="item"> 
        <td>Item </td> 

       </tr> 
       <tr class="item"> 
        <td>Item </td> 
       </tr> 
      </table> 
     </div> 
    </div> 
</body> 
</html> 
相關問題