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

除了Resizable Interaction之外，我还推荐jQuery UI的Sortable 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>