代码之家 › 专栏 › 技术社区 › user2479920

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

jquery-ui-draggable jquery-ui-sortable css jquery javascript

user2479920 · 技术社区 · 7 年前

我有 .rc a中的divs .rcs 部门 .rcs div是可排序的。这个 .rcs div位于a .ra 部门 .ra公司 div可拖动。

当我移动 .钢筋混凝土 从一开始 .ra公司 到第二个,在过渡期间 .钢筋混凝土 已隐藏。

当我做出 .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>

1 回复 | 直到 7 年前

Ali Soltani 7 年前

此问题来自 CSS . 如果您发表评论 overflow: auto; 从您的 CSS 如下所示,它工作正常。

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