Проблема удержания с перетаскиваемым элементом в контейнере изменяемого размера

Question

Проблема удержания с перетаскиваемым элементом в контейнере изменяемого размера

0

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

Следующий код позволяет перемещаемому элементу перемещаться немного вне контейнера из-за дополнительной высоты, созданной ручкой изменения размера (здесь здесь).

HTML

<div class="container2">
    <div class="item2"></div>
</div>

CSS

.container2 {
    min-width:300px;
    min-height:200px;
    outline:1px solid black;
}
.item2 {
    width:50px;
    height:50px;
    background-color:red;
}

JQuery

$(".container2").resizable();

$(".item2").draggable({
    containment: ".container2"
}).resizable({
    containment: ".container2"
});

Поэтому я обошел это, установив защитную оболочку в качестве координат контейнера, используя следующий код:

$(".item2").draggable({
    start: function (event, ui) {
        var containmentX1 = $(".container2").offset().left;
        var containmentY1 = $(".container2").offset().top;
        var containmentX2 = ($(".container2").outerWidth() + $(".container2").offset().left - $(this).outerWidth())
        var containmentY2 = ($(".container2").outerHeight() + $(".container2").offset().top - $(this).outerHeight())
        $(this).draggable({
            containment: [containmentX1, containmentY1, containmentX2, containmentY2]
        });
    },
}).resizable({
    containment: ".container2"
});

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

Я использовал create, а не начал обойти это, но тогда координаты не изменяются, если размер контейнера изменяется.

Есть ли способ получить координаты, распознанные как область сдерживания при первом перетаскивании?

Tom 17 дек. 2013, в 15:07

Источник

Теги:

javascript

jquery

jquery-ui

jquery-ui-draggable

jquery-ui-resizable

2 ответа

0

если после вашего подхода вы можете установить сдерживание при изменении размера.container2 'и при инициализации смотрите там

Другим решением может быть просто использование css:

 .container2 .ui-resizable-s
{
    bottom:0;
}
.container2 .ui-resizable-e
{
    right:0;
}

вы можете проверить там, надеюсь, что это поможет

vitaliy zadorozhnyy 17 дек. 2013, в 13:01

Ещё вопросы

paulitto · Accepted Answer · 2013-12-17T11-57-00.000Z

вы можете перевести ваш пересчет сдерживания в отдельную функцию и вызвать его после инициализации draggable (при создании) и каждый раз, когда контейнер будет изменен (om stop)

$(".container2").resizable({
stop: reCalcBounds
});

$(".item2").draggable({
    create: reCalcBounds
}).resizable({
    containment: ".container2"    
});

function reCalcBounds(){
 var $item =  $(".item2");
 $container = $(".container2");
 var containmentX1 = $container.offset().left;
    var containmentY1 = $container.offset().top;
    var containmentX2 = ($container.outerWidth() + $container.offset().left - $item.outerWidth())
    var containmentY2 = ($container.outerHeight() + $container.offset().top -$item.outerHeight())
    $item.draggable("option", "containment", [containmentX1, containmentY1, containmentX2, containmentY2]);

}

см. обновленную скрипку

Я думаю, вам также нужно позаботиться об изменении minWidth и minHeight изменяемого размера контейнера в зависимости от положения перетаскиваемого элемента, вы можете использовать "стоп" callaback перетаскиваемого для этого