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

Question

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

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

如果我使用 CSS 将可排序元素的高度设置为 100px，它会起作用：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>

Answer 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');
  }
});

Answer 2

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

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

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

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

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

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

Can't connect draggable to empty sortable when setting its height on start of drag

html

javascript

jquery

jquery-ui