在拖动开始时设置其高度时，无法将可拖动对象连接到空可排序对象答案

【问题标题】：Can't connect draggable to empty sortable when setting its height on start of drag在拖动开始时设置其高度时，无法将可拖动对象连接到空可排序对象
【发布时间】：2020-07-29 10:18:58
【问题描述】：

我有一个可拖动元素和两个空的可排序元素。通过使用connectWithSortable，我应该能够将可拖动元素连接到可排序元素。

但是，当可拖动元素第一次被拖动到可排序元素中时，它并没有连接到它。只有在第二次拖动时才会连接。

如果我使用 CSS 将可排序元素的高度设置为 100 像素，它可以工作：https://jsfiddle.net/cekwuyq1/

但是，如果在拖动开始时（我正在这样做）将可排序元素的高度设置为 100px，则会出现问题：https://jsfiddle.net/v9y0L2n1/

$(".sortable").sortable();

$(".draggable").draggable({
  connectToSortable: '.sortable', // Selector selects lists that have sortable class
  helper: 'clone',
  start: function(event, ui) {
    $(".sortable").css("height", "100px"); // setting height on start of drag
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<p class="draggable">Drag me down</p>

<div>
  <p>Sortable 1</p>
  <div class="sortable"></div>
</div>

<div>
  <p>Sortable 2</p>
  <div class="sortable"></div>
</div>

【问题讨论】：

标签： javascript html jquery jquery-ui

【解决方案1】：

创建可拖动函数时尝试添加0高度

$(".draggable").draggable({
  connectToSortable: '.sortable', // Selector selects lists that have sortable class
  helper: 'clone',
  create: function( event, ui ) {
   $(".sortable").css("height", '0px');
  },
  start: function(event, ui) {
  $(".sortable").css("height", '100px');
  }
});

【讨论】：

不幸的是没有运气
如果您将高度更改为“最小高度”，它应该可以正常工作
在create 和start 事件上都试过了，但没有成功
结帐this

【解决方案2】：

我可以通过将mousedown 事件添加到可拖动元素并在调用此事件时将可排序元素的高度设置为 100 像素来解决此问题。

这不是通过在可拖动项上使用start 事件来设置高度。

p 元素上的边距阻止拖动无缝工作，因此我将它们设置为 0。

我在可拖动项上使用stop 事件将可排序元素的高度设置为fit-content，以便在拖动停止后删除不必要的空间。

$(".sortable").sortable();

$(".draggable").draggable({
  connectToSortable: '.sortable', // Selector selects lists that have sortable class
  helper: 'clone',
  stop: function(event, ui) {
    $(".sortable").css("height", "fit-content");
  }
});

$(".draggable")
  .mousedown(function() {
    $(".sortable").css("height", "100px");
  })

p {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<p class="draggable">Drag me down</p>

<br>

<div>
  <p>Sortable 1</p>
  <div class="sortable"></div>
</div>

<br>

<div>
  <p>Sortable 2</p>
  <div class="sortable"></div>
</div>

JsFiddle：https://jsfiddle.net/w84g5ce0/

【讨论】：