可排序的 div from/to 可拖动的 div

Question

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

当我将 .rc 从第一个 .ra 移动到第二个 .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>

Answer 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)

可排序的 div from/to 可拖动的 div

Sortable divs from/to draggable divs

javascript

css

jquery

jquery-ui-sortable

jquery-ui-draggable