Установка границ границ для перетаскиваемого объекта - PullRequest
Новая
       19

Установка границ границ для перетаскиваемого объекта

7 голосов
/ 10 октября 2009

У меня есть два элемента:

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>

Как мне установить верхнюю и нижнюю границы вертикали для позиции списка?

Ответы [ 4 ]

9 голосов
/ 10 октября 2009

Используйте опцию сдерживания : 

$('.myList').draggable({
    axis: 'y',
    containment: 'parent'
});
7 голосов
/ 03 декабря 2010

У меня были такие же проблемы, и ответы мне не помогли. Некоторый 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>
3 голосов
/ 10 октября 2009

Хорошо,

Вот маршрут, по которому я пошел ...

Когда страница загружена, я добавляю контейнер 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>

Список содержится в этом новом элементе.

Это, кажется, делает работу, но позиционирование немного шатко, если к списку применены какие-либо отступы / поля. Любые мысли об этом будут оценены!

------ Редактировать ---------

Хорошо, я думаю, что решил проблему размещения. Я превратил это в плагин, чтобы другие люди не тратили время на создание этой функциональности.

jQuery Drag-gable List на Github

0 голосов
/ 23 сентября 2017

Вам не нужно ничего тянуть за такую ​​структуру. Вам нужно установить родительский div с помощью overflow-x: hidden; и переполнение-у: прокрутка ;. Таким образом, его содержимое будет прокручиваться.

Если вы хотите скрыть полосу прокрутки, просто добавьте это свойство: .dragPanel :: - webkit-scrollbar {width: 0! Важный} и все! Я действительно не знаю, почему вы думали о том, чтобы перетаскивать элементы, а не просто прокручивать содержимое (что является правильным способом решения подобных проблем). В любом случае, я надеюсь, что это поможет любому, кто нуждается в такой же необходимости. Привет! * * 1003

...