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

Posted 2023-05-08

【中文标题】Jquery UI 可排序和可调整大小的 Div

【英文标题】：Jquery UI Sortable & Resizable Divs

【发布时间】：2019-07-23 00:22:13

【问题描述】：

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

【参考方案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>