从/到可拖动 div 的可排序 div答案

【问题标题】：Sortable divs from/to draggable divs从/到可拖动 div 的可排序 div
【发布时间】：2018-02-20 15:02:48
【问题描述】：

我在.rcs div 中有.rc div。 .rcs div 是可排序的。 .rcs div 位于 .ra div 内。 .ra div 是可拖动的。

当我将 .rc 从第一个 .ra 移动到第二个时，在转换过程中，.rc 被隐藏。

当我使 .ras div 可排序时，我没有出现这种行为（.ras 是 .ra 的父级）。

感谢您的帮助。

$(document).ready(function() {
  $(".ra").draggable({
    zIndex: 100
  });
  $(".rcs").sortable({
    connectWith: ".rcs",
  });
});

.ra {
  background-color: white;
  width: 28%;
  height: 200px;
  float: left;
  border-style: solid;
  margin-left: 1%;
  overflow: auto;
  position: relative;
}

.header {
  background-color: white;
  color: black;
  height: 50px;
  width: 26%;
  position: absolute;
}

.rcs {
  margin-top: 50px;
  margin-bottom: : -50px;
  height: 150px;
}

.box {
  width: 60px;
  height: 40px;
  float: left;
  background-color: black;
  border-radius: 3px;
  font-size: 80%;
  color: white;
  margin: 1px;
  padding: 1px;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div class="ras">
  <div class="ra">
    <div class="header">
      <div class="ra_name">Martini, Johnny </div>
    </div>
    <div class="rcs" id="ra1_rcs">
      <div class="box">titre</div>
      <div class="box">titre</div>
      <div class="box">titre</div>
    </div>
  </div>
  <div class="ra">
    <div class="header">
      <div class="ra_name">Martin, John</div>
    </div>
    <div class="rcs">
      <div class="box">titre</div>
      <div class="box">titre</div>
      <div class="box">titre</div>
    </div>
  </div>

【问题讨论】：

标签： javascript jquery css jquery-ui-sortable jquery-ui-draggable

【解决方案1】：

这个问题来自CSS。如果您像下面这样从CSS 评论overflow: auto;，它可以正常工作。

.ra {
  background-color: white;
  width: 28%;
  height: 200px;
  float: left;
  border-style: solid;
  margin-left: 1%;
  /* overflow: auto; */
  position: relative;
}

Online demo (jsFiddle)

【讨论】：

非常感谢阿里！