JQuery UI Сортируемые и изменяемые размеры Div - PullRequest
Новая
       31

JQuery UI Сортируемые и изменяемые размеры Div

0 голосов
/ 01 марта 2019

Я пытаюсь сделать сортируемые элементы div вертикально изменяемого размера.При сортировке все содержимое класса, включая дескриптор изменения размера, рассматривается для сортировки.Отдельно функции JQuery UI работают без проблем.

Я также пытался использовать обработчики в CSS с .ui-resizable-handle и div в качестве обертки для моих "слайдов", но я думаю, что есть лучший способ.

Я попытался изменить размер CSS.
Я попробовал функцию изменения размера jQUery UI в классе.

$(".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;
}

.slideBody {
  background-color: white;
}

.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;
  resize: vertical;
  overflow: auto;
}

.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/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<div class="slides">
  <div class="slide slide1">Slide 1</div>
  <div class="slide slide2">Slide 2</div>
  <div class="slide slide3">Slide 3</div>
  <div class="slide slide4">Slide 4</div>
  <div class="slide slide5">Slide 5</div>
</div>

Посмотреть на Codepen

1 Ответ

0 голосов
/ 01 марта 2019

Я рекомендую пользовательский интерфейс jQuery Изменяемое взаимодействие , в дополнение к Сортируемое взаимодействие . 

$(".slides").sortable({
  axis: "y"
});

$('.slide').resizable({
  handles: 'n, s'
});
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;
}

.slide2 {
  height: 30px;
}

.slide3 {
  height: 50px;
}

.slide4 {
  height: 90px;
}

.slide5 {
  height: 35px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<div class="slides">
  <div class="slide slide1">Slide 1</div>
  <div class="slide slide2">Slide 2</div>
  <div class="slide slide3">Slide 3</div>
  <div class="slide slide4">Slide 4</div>
  <div class="slide slide5">Slide 5</div>
</div>
...