Jquery UI 可排序和可调整大小的 Div

Question

我正在尝试使可排序的 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>

View on Codepen

Answer 1

除了Sortable Interaction，我推荐jQuery UI 的Resizable Interaction。

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