Расширяйте содержащий div при перетаскивании элемента внутри него и достижении пределов - PullRequest
Новая
       10

Расширяйте содержащий div при перетаскивании элемента внутри него и достижении пределов

1 голос
/ 11 августа 2011

На моей странице есть несколько элементов (div), которые можно перетаскивать и изменять их размер.Мой код для этого приведен ниже: 

part.draggable(
                     {
                                containment: 'parent',
                                drag: function(event, ui){
                                partIsDragging = true
                                part.prev().css('top', ui.position.top - 20 ).css('left', ui.position.left )
                                part.prev().show()
                           },
                                stop: function(event, ui) {
                                         partIsDragging = false
                            }
                              }).resizable({
                                 containment: 'parent',
                                 handles: 'ne, se, sw, nw,n,w,e,s',
                                 stop: function() {
                                            }                                        
                              });

Структура HTML для них следующая: 

<body>
<div id="wrapper">
    <div class="draggableItem"></div>
    <div class="draggableItem"></div>
    <div class="draggableItem"></div>
    <div class="draggableItem"></div>
</div>
</body>

В моих файлах CSS я установил рост тела: 100% и оберткувысота: 100%.Ширина всегда фиксирована для обертки, ширина: 950px.Я хочу, чтобы мой div увеличивался в высоте, когда draggableItem достигает нижней части оболочки.Прямо сейчас, когда страница загружена, она имеет высоту настолько большую, насколько позволяет разрешение, но в случае, если у меня есть больше элементов в обертке, все становится загроможденным, и я хотел бы при перетаскивании элемента динамически увеличивать высоту обертки.Это должно произойти, только если я достиг нижней границы.

PS: я использую jQuery и jQuery-ui.

1 Ответ

1 голос
/ 12 августа 2011

У меня может быть решение.Во-первых, я заменил part на '.draggableItem' и this, где это необходимо.Пожалуйста, скажите мне, если это нарушает код каким-то критическим образом.Кроме того, я удалил part.prev().css('top', ui.position.top - 20 ).css('left', ui.position.left ) в приведенном ниже коде. 

function adjustWrapperHeight(movingObject)
{
    var objectBottomPosition = $(movingObject).offset().top+$(movingObject).height()
    var wrapperBottomPosition = $("#wrapper").offset().top+$("#wrapper").height()
    if(wrapperBottomPosition-objectBottomPosition<distanceBuffer)
    {
        $("#wrapper").height($("#wrapper").height()+distanceBuffer+1)
    }
}

var distanceBuffer = 20;
$('.draggableItem').draggable(
        {
            containment: 'parent',
            drag: function(event, ui)
            {
                partIsDragging = true
                adjustWrapperHeight(this)
            },
            stop: function(event, ui)
            {
                partIsDragging = false
            }
        }).resizable(
        {
             handles: 'ne, se, sw, nw,n,w,e,s',
             resize: function(event, ui)
             {
                adjustWrapperHeight(this)
                var objectRightPosition = $(this).offset().left+$(this).width()
                var wrapperRightPosition = $("#wrapper").offset().left+$("#wrapper").width()
                if(wrapperRightPosition<=objectRightPosition)
                {
                    $(this).width(ui.originalSize.width)
                    var containmentLeftPosition = wrapperRightPosition-$(this).width()
                    $(this).offset({top:$(this).offset().top,left:containmentLeftPosition})
                }
             }                                    
         })
        })

Функция adjustWrapperHeight(movingObject) регулирует высоту div#wrapper в зависимости от нижнего положения movingObject.То есть, когда movingObject "отталкивается" от границ div#wrapper, он регулирует высоту div#wrapper.

Мне пришлось использовать хак для resizable.containment: 'parent' для resizable (но не draggable) устанавливает в контейнере высоту ORIGINAL контейнера или, как кажется.Это означает, что при динамическом изменении высоты div#wrapper ограничение, установленное containment: 'parent', не изменяется динамически.Чтобы исправить это, я удалил containment: 'parent' и даже весь containment и убедился, что правое удержание div#wrapper не нарушено в событии resize.Обратите внимание, что вы, вероятно, должны делать это и с левой ячейкой div#wrapper.

Скажите, пожалуйста, было ли это полезно.Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...