Используя перетаскиваемый пользовательский интерфейс jQuery, как я могу перетащить в любое место родителя, чтобы переместить ребенка?

Question

Используя перетаскиваемый пользовательский интерфейс jQuery, как я могу перетащить в любое место родителя, чтобы переместить ребенка?

0

Используя jQueryUI draggable plug-in, я хочу, чтобы любые события перетаскивания в родительском контейнере перемещали конкретный, один дочерний элемент, независимо от того, было ли событие перехода по щелчку и перетаскиванию запущено на дочернем устройстве или нет.

Рассмотрим этот простой пример: http://jsfiddle.net/9rqHe/

HTML:

<div id="parent">
    <div id="child">Child</div>
</div>

CSS:

#parent {
    width: 100%;
    height: 400px;
    border: 1px solid red;
    overflow: hidden;
}

#child {
    width: 50%;
    height: 50%;
    background-color: green;
    cursor: move;
}

JS:

$(document).ready(function() {
    $('#child').draggable();
});

Можно ли делегировать действие перетаскивания на родителя, чтобы он переместился?

Параметр handle кажется, что он будет работать, если бы не это важное предостережение:

Если указано, ограничивает перетаскивание с момента запуска, если на указанном элементе (-ах) нет мускулатуры. Разрешены только элементы, которые спускаются с перетаскиваемого элемента.

Ничто другое в документации API, похоже, не указывает на то, что это возможно из коробки, если я полностью не упустил что-то.

Michael Irigoyen 01 апр. 2014, в 21:08

Источник

Теги:

jquery

jquery-ui

jquery-ui-draggable

2 ответа

0

Грязный хак Я придумал "на лету", поскольку по какой-то причине запуск события перетаскивания больше не работает.

JSFiddle

В основном я помещаю дочерний элемент в div #child и использую функцию события jQuery, чтобы всегда позиционировать его над #parent div.

function updatehack(e,ui)
{
    $('#hack').width($('#parent').width());
    $('#hack').height($('#parent').height());
    var p=$('#child').position();
    $('#hack').css('top',-p.top);
    $('#hack').css('left',-p.left);
}


$('#child').draggable({
    stop:updatehack   
});

René Roth 01 апр. 2014, в 17:55

Ещё вопросы

j08691 · Accepted Answer · 2014-04-01T16-45-00.000Z

Там нет встроенного способа сделать это. но вы можете получить аналогичный эффект с дополнительным div и некоторыми jQuery и CSS.

Пример jsFiddle

HTML

<div id="parent">
    <div id="child">Child</div>
    <div id="ghost"></div>
</div>

JQuery

var childX = 0,
    childY = 0;
$('#ghost').draggable({
    drag: function (event, ui) {
        $('#child').offset({
            top: childY + ui.offset.top,
            left: childX + ui.offset.left
        });
    },
    stop: function (event, ui) {
        $(this).offset({
            top: 0,
            left: 0
        });
        childX = $('#child').offset().left;
        childY = $('#child').offset().top;
    }
})

CSS

#parent {
    width: 100%;
    height: 400px;
    border: 1px solid red;
    overflow: hidden;
    position:relative;
}
#child {
    width: 50%;
    height: 50%;
    background-color: green;
    cursor: move;
    position:relative;
    z-index:1;
    pointer-events:none;
}
#ghost {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
}

Это определенно представляет решение для того, что я поделился выше. Очевидно, мои примеры были ошарашены. Мое последнее препятствие заключается в том, что я позволяю «увеличивать» и уменьшать «дочерний элемент» (используя transform ). Когда я увеличиваю или уменьшаю масштаб, он также не привязывается к курсору. Есть идеи на этот счет?
Не с моей головы. Возможно, стоит начать еще один вопрос с добавленной детализацией.