JQuery UI, как установить перетаскиваемую опцию сдерживания на родителя родителя

Question

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

$( ".selector" ).draggable({ containment: 'parent' });

Я хочу установить содержание в качестве родителя родителя. Для этого нет строкового значения, так как строковые параметры:

«родитель», «документ», «окно», [x1, y1, x2, y2]

Я мог бы вычислить x1, y1, x2, y2 родительского родителя при загрузке страницы и использовать эти значения, чтобы установить границы для контейнера относительно документа. Но позиция контейнера может измениться относительно родительской позиции родителя, если размер окна изменяется после загрузки страницы. Родная опция 'parent' сохраняет перетаскиваемый элемент внутри родительского элемента независимо от изменения размера окна.

Есть ли способ выполнить это перетаскиваемое сдерживание с помощью родителя родителя? .

Answer 1

Согласно документации , опция containment также может быть селектором jquery или фактическим элементом.Таким образом, вы можете сделать это:

$('.selector').draggable({
    containment: $('.selector').parent().parent()
});

Или еще лучше:

$('.selector').each(function(){
    $(this).draggable({
        containment: $(this).parent().parent()
    });
});

Answer 2

Согласно документации, не нужно передавать строку для свойства containment.Вы можете передать любое из:

Selector, Element, String, Array

Итак, просто выберите родителя родителя с помощью jQuery (то есть $( ".selector" ).parent().parent()) и введите вместо 'parent'.

Answer 3

Если я использую $(this).parent(), мой элемент переходит на родительский элемент.

$('.selector').draggable({
  containment: $(this).parent()
});

Но с parent работает нормально.

$('.selector').draggable({
  containment: "parent"
});

Answer 4

Это тоже хорошо работает:

$('.selector').draggable({
    containment: "#parent",
    scroll: false
});