設置爲可拖動對象

1.固定高度的父，overflow:hidden

2.及其孩子，較大的固定的高度。

<style type="text/css"> 
    .myList {list-style:none; margin:0px; padding:1px;} 
    .myList li{ height:50px; margin:4px; padding:2px;} 
    .dragPanel {height:230px; border:solid; overflow:hidden;} 
</style> 

<div class="dragPanel"> 
    <ul class="myList"> 
     <li>1</li> 
     <li>2</li> 
     ... .... 
     <li>8</li> 
     <li>9</li> 
    </ul> 
</div>

我想能夠在父div中上下拖動列表。我正在使用jQuery UI可拖動插件來實現垂直拖動，但我不確定如何限制父div內的列表。

<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.dragPanel').addClass("hover"); 
     $('.myList').draggable({ axis: 'y' }); 
    }); 
</script>

我該如何去設置列表位置的垂直上限和下限？

來源

2009-10-10 Paul

好吧，

這裏是我已經下降的路線......

當加載頁面時，我周圍添加了可拖動一個div容器名單。我設置它的高度兩倍列表，然後將其放置在頁面一點：

<script type="text/javascript"> 
    $(document).ready(function() { 
     CreateContainerDiv(); 
     $('.dragPanel').addClass("hover"); 
     $('.myList').draggable({ axis: 'y', containment: 'parent' }); 
    }); 

    function CreateContainerDiv() { 
     var dragPanel = $('.dragPanel'); 
     var dragTarget = $('.myList'); 

     // add the container panel 
     var newPanelHeight = dragTarget.outerHeight() * 2 - dragPanel.outerHeight(); 
     dragTarget.wrap(document.createElement("div")); 

     // set its height and put it in the right place 
     dragTarget.parent().css("height", newPanelHeight); 
     dragTarget.parent().css("position", "relative"); 
     var newPanelPosition = ((dragTarget.outerHeight() * -1)/2); 
     dragTarget.parent().css("top", newPanelPosition);   
    } 
</script>

該列表會被包含到這個新元素。

這似乎是做這項工作，但如果列表有任何填充/邊距應用，定位是一個小shakey。任何想法都會被理解！

------編輯---------

好的，我想我已經解決了放置問題。我把它變成了一個插件，所以其他人不必花時間創建這個功能。

jQuery Drag-gable List at Github

來源

2009-10-10 15:08:10 Paul

非常非常好的方法，添加一個其他大小的另一個滾動窗格是非常nice.Excellent保羅.. – 2012-07-26 20:20:52

使用containment option：

$('.myList').draggable({ 
    axis: 'y', 
    containment: 'parent' 
});

來源

2009-10-10 11:08:26 moff

父母的孩子比孩子小 - 當我嘗試這個選項時，拖動不起作用 - 這個列表只是在頂部和底部位置之間跳躍 – Paul 2009-10-10 11:11:47

這太棒了。容易 – Tushortz 2015-06-22 11:04:01

我有同樣的問題和答案對我沒有幫助。稍後的一些javascript我認爲以下是更好的解決方案。

（任何人都知道如何把它變成一個jQuery插件？）

<!DOCTYPE html> 
<html> 
<head> 
    <title>Draggable limited to the container</title> 
    <style type="text/css"> 
    #container { 
     cursor: move; 
     overflow: hidden; 
     width: 300px; 
     height: 300px; 
     border: 1px solid black; 
    } 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
     $.globalVars = { 
      originalTop: 0, 
      originalLeft: 0, 
      maxHeight: $("#draggable").height() - $("#container").height(), 
      maxWidth: $("#draggable").width() - $("#container").width() 
     }; 
     $("#draggable").draggable({ 
      start: function(event, ui) { 
       if (ui.position != undefined) { 
        $.globalVars.originalTop = ui.position.top; 
        $.globalVars.originalLeft = ui.position.left; 
       } 
      }, 
      drag: function(event, ui) { 
       var newTop = ui.position.top; 
       var newLeft = ui.position.left; 
       if (ui.position.top < 0 && ui.position.top * -1 > $.globalVars.maxHeight) { 
        newTop = $.globalVars.maxHeight * -1; 
       } 
       if (ui.position.top > 0) { 
        newTop = 0; 
       } 
       if (ui.position.left < 0 && ui.position.left * -1 > $.globalVars.maxWidth) { 
        newLeft = $.globalVars.maxWidth * -1; 
       } 
       if (ui.position.left > 0) { 
        newLeft = 0; 
       } 
       ui.position.top = newTop; 
       ui.position.left = newLeft; 
      } 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <div id="container"> 
     <img id="draggable" src="avatar.jpg" /> 
    </div> 
</body> 
</html>

來源

2010-12-03 15:03:16 Lode

你不必爲那種結構的拖東西。你需要的是用overflow-x設置父div：hidden;和overflow-y：scroll ;.這樣，它的內容就會滾動。

如果你想隱藏滾動條，只需要放置這個屬性：.dragPanel :: webkit-scrollbar {width：0！important}就是這樣！我不知道你爲什麼想要拖動元素而不是滾動內容（這是執行這種「問題」的正確方法）。無論如何，我希望它能幫助任何需要適應相同要求的人。問候！

來源

2017-09-23 01:15:38 Criss

設置爲可拖動對象

回答

相關問題