Сохранение перетаскиваемых элементов, которые не ускользают от других

Question

Используя онлайн-ресурсы, я смог создать стопку перетаскиваемых элементов, sh Others Out Of Way. Вот пример:

jQuery Возможность сортировки с переходами и поддержкой различной высоты

Теперь я хочу иметь массив javascript, который сохраняет состояние стека в любой момент. например, если стек находится в состоянии ниже, массив будет примерно таким:

myarray = [["Slide 2"],["Slide 1"],["Slide 4"],["Slide 3"]]

введите описание изображения здесь

Какое изменение я должен внести в свой код javascript, чтобы добиться этого?

Answer 1

это главный лог c массива javascript.

$( document ).ready(function() {
   
    var arrayVariable = ['slide 1','slide 2','slide 3','slide 4','slide 5'],
        arrayLength = arrayVariable.length;
    var html="";
    for (i = 0; i < arrayLength; i++) {
     var list =  '<li class="slide">'+arrayVariable[i]+'</li>'
     html += list;
     
    }
    $('.slides').html(html);

});

$( document ).ready(function() {
   
    var arrayVariable = ['slide 1','slide 2','slide 3','slide 4','slide 5'],
        arrayLength = arrayVariable.length;
    var html="";
    for (i = 0; i < arrayLength; i++) {
     var list =  '<li class="slide">'+arrayVariable[i]+'</li>'
     html += list;
     
    }
    $('.slides').html(html);

});

    $(".slides").sortable({
     placeholder: 'slide-placeholder',
    axis: "y",
    revert: 150,
    start: function(e, ui){
        
        placeholderHeight = ui.item.outerHeight();
        ui.placeholder.height(placeholderHeight + 15);
        $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
    
    },
    change: function(event, ui) {
        
        ui.placeholder.stop().height(0).animate({
            height: ui.item.outerHeight() + 15
        }, 300);
        
        placeholderAnimatorHeight = parseInt($(".slide-placeholder-animator").attr("data-height"));
        
        $(".slide-placeholder-animator").stop().height(placeholderAnimatorHeight + 15).animate({
            height: 0
        }, 300, function() {
            $(this).remove();
            placeholderHeight = ui.item.outerHeight();
            $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
        });
        
    },
    stop: function(e, ui) {
        
        $(".slide-placeholder-animator").remove();
        
    },
});

body {
    padding: 20px;
}
.slides {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 300px;
}
.slide {
    padding: 15px;
    background-color: #2F2F2F;
    margin: 0 0 15px;
    text-align: center;
    color: #FFF;
    border: 2px solid #444;
}

.slide-placeholder {
    background: #DADADA;
    position: relative;
}
.slide-placeholder:after {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 15px;
    background-color: #FFF;
}

.slide2 {
    height: 30px;
}
.slide3 {
    height: 50px;
}
.slide4 {
    height: 90px;
}
.slide5 {
    height: 35px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<ul class="slides">
    
</ul>

Answer 2

Во-первых, вы должны установить пустой массив из l oop.

Вы можете использовать each () до l oop для всех тегов li и использовать функцию pu sh для добавления ваш элемент в ваш массив, затем функция prop () для получения содержимого класса, а затем используйте собственные функции javascript split (), чтобы взорвать класс с разделителем ''.

Все ваши элементы теперь находятся в var tabSlides.

$(".slides").sortable({
     placeholder: 'slide-placeholder',
    axis: "y",
    revert: 150,
    start: function(e, ui){
        
        placeholderHeight = ui.item.outerHeight();
        ui.placeholder.height(placeholderHeight + 15);
        $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
    
    },
    change: function(event, ui) {
        
        ui.placeholder.stop().height(0).animate({
            height: ui.item.outerHeight() + 15
        }, 300);
        
        placeholderAnimatorHeight = parseInt($(".slide-placeholder-animator").attr("data-height"));
        
        $(".slide-placeholder-animator").stop().height(placeholderAnimatorHeight + 15).animate({
            height: 0
        }, 300, function() {
            $(this).remove();
            placeholderHeight = ui.item.outerHeight();
            $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
        });
        
    },
    stop: function(e, ui) {
        $(".slide-placeholder-animator").remove();
        
        console.clear();
        var tabSlides = [];
        $('.slides li').each(function() {
          tabSlides.push($(this).prop('class').split(' ')[1]);
        });

        $.each(tabSlides, function(index, value){
          console.log(`${value}`);
        });
    },
});

body {
    padding: 20px;
}
.slides {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 300px;
}
.slide {
    padding: 15px;
    background-color: #2F2F2F;
    margin: 0 0 15px;
    text-align: center;
    color: #FFF;
    border: 2px solid #444;
}

.slide-placeholder {
    background: #DADADA;
    position: relative;
}
.slide-placeholder:after {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 15px;
    background-color: #FFF;
}

.slide2 {
    height: 30px;
}
.slide3 {
    height: 50px;
}
.slide4 {
    height: 90px;
}
.slide5 {
    height: 35px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<p>Look! The items are different heights but the transitions still work</p>
<ul class="slides">
  <li class="slide slide2">Slide 2</li>
  <li class="slide slide1">Slide 1</li>
  <li class="slide slide4">Slide 4</li>
  <li class="slide slide3">Slide 3</li>
  <li class="slide slide5">Slide 5</li>
</ul>

<div class="result"></div>