Повторное позиционирование изображения или DIV с .position() и слияние элементов для заполнения пробела

Question

Использование .position() для пользовательского интерфейса jQuery, я могу успешно переместить изображение в конец списка изображений ... однако я ' m не уверен, как заставить другие изображения «перемещаться вверх», чтобы заполнить пространство.

Я знаю, что перемещенному изображению дается относительное позиционирование, которое, как я считаю, приводит к тому, что другие изображения «остаются» на своих местах. Проблема в том, что я не уверен, как переместить других. (не двигая КАЖДОГО изображения, каждый раз перемещается другое изображение вокруг него, что я не вижу, как это было бы возможно, когда я мог бы загружать любое неизвестное количество изображений)

В идеале я хотел бы переместить весь DIV на DOM, с анимацией, но я не могу понять, как сделать это, так что я должен был возвратиться к использованию .position()

JS Fiddle Link

$('#btn').click(function() { 
 
    $('#elemA').position({ 
 
    my: 'left top', 
 
    at: 'left bottom', 
 
    of: $('#elemC'), 
 
    collision: 'none', 
 
    using: function(pos) { 
 
     $(this).animate(pos, "fast") 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div> 
 

 
    <button id="btn">click</button> 
 

 

 
    <div id="elemA"> 
 
    <img src="https://cdn.pbrd.co/images/l1wpxNXG9.jpg"> 
 
    </div> 
 

 
    <div id="elemB"> 
 
    <img src="https://cdn.pbrd.co/images/l1xYdbrhS.jpg"> 
 
    </div> 
 

 
    <div id="elemC"> 
 
    <img src="https://cdn.pbrd.co/images/l1yt0skhN.jpg"> 
 
    </div> 
 

 
</div>

Answer 1

Может быть, что-то вроде this?

я не изменил любой из ваших HTML, и все, что я сделал в CSS, делают изображения position:absolute, так вот JQuery:

$(document).ready(function() { 
    $('img').each(function(i) { 
    $(this).attr('name', i).css({ 
     top: 40 + ($(this).attr('name') * 155) + 'px' 
    }) 
    }); // Set the initial image positions 
    $('#btn').click(moveImages); // Add click handler to button 
}); 

function moveImages() { 
    $('img').each(function() { // Loop over all your images 
    var imgNum = $(this).attr('name'); // Grab the numerical name 
    $(this).attr('name', imgNum - 1); // Whatever that number is, subtract 1 
    $('img[name=-1]').attr('name', $('img').length - 1); // Change the -1 to be the highest number 
    $(this).animate({ 
     top: 40 + ($(this).attr('name') * 155) + 'px' 
    }); // Multiply the new number by 155, and animate to that position 
    }); 
} 

Надеюсь, мои комментарии имеют смысл, но вот не -so-basic rundown:

1. Теперь, когда ваши изображения расположены абсолютно, все они находятся в верхнем левом углу. Чтобы они были аккуратно отображены в вертикальном столбце, нам нужно дать им сумму top. Но сколько? Наилучшим образом, каждое изображение имеет высоту около 150 пикселей, и если мы добавим 5-пиксельный буфер к нижней части, это 155. Первое изображение легко; он должен быть в top:0 (или 155 * 0). Второе изображение должно быть в top:155px или (155 * 1). Третий должен быть в top:310px (или 155 * 2). См. Шаблон? (Примечание:. Я добавил 40 пикселей для каждого из этих чисел позже, чтобы дать место для кнопки в верхней части)
2. Поэтому я использовал .each() для перебора всех изображений, а также с помощью .attr() метода JQuery, я дал каждое изображение name="x", где x начинается с 0 и увеличивается на один на изображение. Затем с .css() я дал каждое изображение top:x * 155, где x - это изображение name.
3. Итак, теперь я хочу, чтобы первое изображение (name="0") переместилось туда, где находится третье изображение, а второе изображение - туда, где находится первое изображение, а третье изображение - туда, где находится второе изображение. Все, что мне нужно сделать, - установить имя первого изображения на 2 (так что это top становится 155 * 2), второе имя изображения равно 0, а третье изображение - 1. Действительно, все, что я делаю, уменьшает имя каждого изображения (кроме первого) на 1. Так вот что я делаю в функции moveImages.
4. Для первого изображения я фактически уменьшаю его имя на 1, так что он становится -1. Затем я выбираю изображение с name из -1 и задаю его имя общее количество изображений минус 1, что равно 2. Это означает, что этот код будет работать независимо от того, сколько у вас изображений.

Надеюсь, это поможет!Если это не решит вашу проблему, я был бы рад изменить свой код.