来自/到可拖动div的可排序div

Question

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

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

当.ras div可排序（.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>

import urllib.request
import requests
from bs4 import BeautifulSoup
from urllib.request import urlopen
import csv

url = "https://www.someurl.com/person.asp?personId=123456789"

page = urllib.request.urlopen(url)
soup = BeautifulSoup(page, "lxml")

name = soup.find("h1", {"class": "name"}).get_text()
job = soup.find("span", {"itemprop": "jobTitle"}).get_text()
worksfor = soup.find("a", {"itemprop": "worksFor"}).get_text()

with open('output.csv', 'w') as csvfile:
    spamwriter = csv.writer(csvfile, delimiter=';', quoting=csv.QUOTE_MINIMAL)
    spamwriter.writerow([name, job, worksfor])

Answer 1

此问题来自CSS。如果您对overflow: auto;中的CSS发表评论，则可以正常使用。

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

Online demo (jsFiddle)