设置可拖动对象的边界限制 [英] Setting boundary limits for a draggable object

问题描述

我有两个元素：

1。固定高度的父级，溢出：隐藏

2。其子女，固定高度较大。

2. Its child, of larger fixed height.

<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 draggable插件来实现Verticle拖动，但我不确定如何约束父div中的列表。

I want to be able to drag the list up and down within the parent div. I am using the jquery ui draggable plugin to achieve verticle dragging, but I am unsure how to constrain the list within the parent 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>

我如何为列表的位置设置垂直上限和下限？

How would I go about setting verticle upper and lower limits for the posistion of the list?

推荐答案

好的，

这是我走的路线......

Here is the route I have gone down...

当页面加载时，我在可拖动列表周围添加一个容器div。我把它的高度设置为列表的两倍，然后将它放在页面上一点点：

When the page is loaded, I add a container div around the draggable list. I set it's height to twice that of the list, then position it up the page a little:

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

然后该列表包含在这个新元素中。

The list is then contained to this new element.

这似乎可以完成这项任务，但如果列表中有任何填充/边距应用，则定位会有点不对劲。任何想法都会被贬低！

This appears to do the job, but the positioning is all a little shakey if the list has any padding / margin applied. Any thoughts on that would be appreicated!

------编辑---------

------Edit ---------

好的，我想我已经解决了安置问题。我把它变成了一个插件，所以其他人不必花时间创建这个功能。

Ok, I think I have solved the placement issue. I have turned this into a plugin so other people don't have to spend time creating this functionality.

Github上的jQuery Drag-gable列表

这篇关于设置可拖动对象的边界限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！