javascript - 如何使用 jquery sortable 对一组元素进行排序并防止放置一个点

Question

我有一个类别列表，每个类别下面都有自己的问题。我想对所有类别以及他们的问题进行排序。

使用我当前的代码，我只能对类别栏进行排序，但问题仍然存在。

这是我的 html（问题和类别可以是任意数量，因为在创建它们时可以动态添加它们）：

<span id="sortablecats" class="ui-sortable">
   <label class="categorytitle ui-sortable-handle" style="">jjjj</label>
   <div class="row ui-sortable-handle" id="questionrow">
      <div class="col-md-8">
         <p class="questionclass">hhhh</p>
      </div>
      <div class="col-md-4">
         <div class="container text-right">
            <input type="radio" name="questionlist[jjjj][hhhh]" id="radio-1" value="ok" required="">
            <label class="radiotoggle" for="radio-1"><span class="radio">Ok</span></label>
            <input type="radio" name="questionlist[jjjj][hhhh]" id="radio-2" value="fout" checked="">
            <label class="radiotoggle" for="radio-2"><span class="radio">Fout</span></label>
            <input type="radio" name="questionlist[jjjj][hhhh]" id="radio-3" value="nvt">
            <label class="radiotoggle" for="radio-3"><span class="radio">N.v.t</span></label>
         </div>
      </div>
      <div class="col-md-8">
         <p class="questionclass">jjj</p>
      </div>
      <div class="col-md-4">
         <div class="container text-right">
            <input type="radio" name="questionlist[jjjj][jjj]" id="radio-4" value="ok" required="" checked="">
            <label class="radiotoggle" for="radio-4"><span class="radio">Ok</span></label>
            <input type="radio" name="questionlist[jjjj][jjj]" id="radio-5" value="fout">
            <label class="radiotoggle" for="radio-5"><span class="radio">Fout</span></label>
            <input type="radio" name="questionlist[jjjj][jjj]" id="radio-6" value="nvt">
            <label class="radiotoggle" for="radio-6"><span class="radio">N.v.t</span></label>
         </div>
      </div>
   </div>
   <label class="categorytitle ui-sortable-handle" style="">Testt</label>
   <div class="row ui-sortable-handle" id="questionrow">
      <div class="col-md-8">
         <p class="questionclass">test</p>
      </div>
      <div class="col-md-4">
         <div class="container text-right">
            <input type="radio" name="questionlist[Testt][test]" id="radio-7" value="ok" required="">
            <label class="radiotoggle" for="radio-7"><span class="radio">Ok</span></label>
            <input type="radio" name="questionlist[Testt][test]" id="radio-8" value="fout" checked="">
            <label class="radiotoggle" for="radio-8"><span class="radio">Fout</span></label>
            <input type="radio" name="questionlist[Testt][test]" id="radio-9" value="nvt">
            <label class="radiotoggle" for="radio-9"><span class="radio">N.v.t</span></label>
         </div>
      </div>
   </div>
</span>

还有我的js：

$( "#sortablecats" ).sortable({
    placeholder: "ui-state-highlight",
    connectWith: "#questionrow",
    cancel: "#questionrow"
  });

我有一个jsfiddle来演示当前正在发生的事情

我怎样才能做到这一点，以便我只对一个包含所有问题的类别进行排序？并且只能将它们排序在其他组之上或之下（所以不能将一个组放在另一个组的中间）？

标签： javascriptjqueryhtmlcssjquery-ui-sortable

Answer 1

您需要将所有可排序的内容放在同一个子 div 中并将它们链接到父级。

例如让父 div 像这样：

<div id="sortMyContents">
    <div>Content to be draggable with everything inside</div>
    <div>Content to be draggable with everything inside</div>
</div>

按照这个逻辑，你的代码应该是：

$("#sortablecats").sortable({
  connectWith: "#questionrow",
  cancel: "#questionrow"
});

/* Dropdown menu */

.dropdown {
  position: relative;
  display: inline-block;
}

.btn-success {
  background-color: #10355e !important;
  border: 1px solid #10355e !important;
}

.bar {
  height: 18px;
  background: green;
}

.savewpi {
  margin-top: 10px;
}

.deletefileclass {
  cursor: pointer;
  font-size: 20px;
  color: #10355e;
}

.btn-success:hover {
  background-color: #051d38 !important;
  border: 1px solid #051d38 !important;
}

.displaynonecoid {
  display: none;
}

.lijstnaamtitle {
  font-size: 20px;
  color: #212529;
}

.lijsttitle {
  width: 85% !important;
  margin-top: 0px !important;
}

.lijstresult {
  background-color: #10355e;
  color: #fff;
  padding: 20px;
  font-size: 20px;
  border-radius: 5px;
  text-align: center;
  margin-top: 15px;
  display: none;
}

.horscroll {
  overflow-x: scroll !important;
}

.hiddenupload {
  display: none;
}

.addsubpage {
  display: none;
}

.progress-bar {
  background-color: #10355e !important;
}

.fileDisplayArea img {
  max-width: 100% !important;
}

.tarievenhead {
  background-color: #10355e;
  color: #fff;
}

.trinv {
  background-color: #edeaea;
}

.companylogo {
  max-width: 100%;
}

.headerlogo {
  max-height: 100px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.switch-field {
  font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
  padding: 40px;
  overflow: hidden;
}

.switch-title {
  margin-bottom: 6px;
}

.switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.switch-field label {
  float: left;
}

.switch-field label {
  display: inline-block;
  width: 60px;
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  text-shadow: none;
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.container label {
  position: relative;
}

/* Base styles for spans */

.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* Radio buttons */

.container span.radio:hover {
  cursor: pointer;
}

.addwerkplekinspectie input[type="radio"] {
  display: none;
}

.questionclass {
  margin-left: 15px;
  font-size: 17px;
  font-weight: 500;
  border-bottom: 2px solid #e9e9e9;
  height: 90%;
}

.nomarginleft {
  margin-left: 0px !important;
}

.inputtitles {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 30px;
  margin-left: 10px;
}

.borderbottom {
  border-bottom: 2px solid #ccc;
}

.text-right {
  text-align: right;
  margin-top: 5px;
}

.radiotoggle {
  display: inline-block;
  margin-bottom: .5rem;
  margin-left: 60px;
  position: relative !important;
  right: 0px;
}

.container span.radio::before {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #10355e;
  border-radius: 50px;
}

.container span.radio::after {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
}

input[type="radio"]:checked+label span.radio::after {
  left: -27px;
  background-color: #ffffff;
}

.categorytitle {
  font-size: 20px;
  background-color: #10355e;
  padding: 10px;
  color: #fff;
  display: block;
  border-radius: 3px;
}

.switch-field label:hover {
  cursor: pointer;
}

.switch-field input:checked+label {
  background-color: #A5DC86;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

.deletedemployee {
  display: none;
  font-size: 20px;
  padding: 20px;
  text-align: center;
  background-color: #10355e;
  color: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
  width: 100%;
}

.deletewpi {
  display: none;
  font-size: 20px;
  padding: 20px;
  text-align: center;
  background-color: #10355e;
  color: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
  width: 100%;
}

.deletedtemplate {
  display: none;
  font-size: 20px;
  padding: 20px;
  text-align: center;
  background-color: #10355e;
  color: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
  width: 100%;
}

.addedemployee {
  display: none;
  font-size: 20px;
  padding: 20px;
  text-align: center;
  background-color: #206b0a;
  color: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
}

.filedeletedmessage {
  display: none;
  font-size: 15px;
  padding: 5px;
  text-align: center;
  background-color: #206b0a;
  color: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
}

.resultmessage {
  display: none;
  font-size: 20px;
  padding: 20px;
  text-align: center;
  background-color: #206b0a;
  color: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
}

.resultmessageuser {
  display: none;
  font-size: 20px;
  padding: 20px;
  text-align: center;
  background-color: #206b0a;
  color: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
}

.deleteduser {
  display: none;
  font-size: 20px;
  padding: 20px;
  text-align: center;
  background-color: #206b0a;
  color: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
}

.manualmessage {
  display: none;
  font-size: 20px;
  padding: 20px;
  text-align: center;
  background-color: #206b0a;
  color: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
}

.resultmessageuseradded {
  display: none;
  font-size: 20px;
  padding: 20px;
  text-align: center;
  background-color: #206b0a;
  color: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
}

.editcontentmessage {
  display: none;
  font-size: 20px;
  padding: 20px;
  text-align: center;
  background-color: #206b0a;
  color: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
}

.fs-upload-input {
  background-color: #10355e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
}

.fs-upload-target {
  padding-top: calc(.375rem + 1px);
  padding-bottom: calc(.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
  float: left;
  font-weight: 500;
}

.categorylist {
  margin-bottom: 20px;
  padding-left: 0px;
}

.sortwrap input {
  display: inline-block !important;
  width: 85% !important;
}

.sortwrap {
  position: inherit !important;
}

.catinput {
  margin-top: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.dragndrop {
  font-size: 34px;
  color: #10355e;
  cursor: move;
  border: 1px solid #ced4da;
  border-radius: 3px;
  top: 7px;
  position: relative;
}

.ui-state-highlight {
  width: 100%;
  height: 40px;
  border: 1px solid #113c69;
  width: 300px;
}

.wrapper {
  clear: both;
   !important;
}

.inspectiebutton {
  margin-top: 20px;
}

.removebutton {
  margin-top: 18px;
  margin-left: -90px;
}

.questionbutton {
  margin-left: 20px;
  margin-bottom: 5px;
}

.questioninput {
  margin-left: 20px;
  margin-bottom: 5px;
}

.removequestion {
  margin-top: 10px;
}

.categorylist li {
  list-style: none;
  list-style-position: inside;
}

.categorylist li input {
  font-weight: 500;
}

.questionlist li input {
  font-weight: normal;
}

.questionlist li {
  margin-top: 10px;
  margin-left: -10px;
}

#loginresult {
  background-color: #dc0b0b;
  color: #fff;
  padding: 20px;
  border-radius: 4px;
  font-size: 20px;
  display: none;
}

.dropdown-content {
  display: none;
}

.dropdown-show {
  display: block !important;
  padding: 4px 10px !important;
  z-index: 1;
}

/* Einde dropdown menu */

.menuicon {
  font-weight: bold;
  font-size: 20px;
  cursor: pointer;
}

.backlink {
  color: #fff;
}

.addcontent {
  display: none;
}

.backlink:hover {
  color: #fff;
}

.personeel {
  font-size: 90px;
}

.versions {
  display: none;
}

.green {
  color: #55af11 !important;
}

.red {
  color: #c31111 !important;
}

.versionlist {
  list-style-type: none;
  list-style-position: inside;
  padding-left: 0px;
}

.versionlist li {
  margin-bottom: 10px;
}

.versionlist i {
  font-size: 25px;
  color: #10355e;
  cursor: pointer;
}

.mtop-20 {
  margin-top: 20px;
}

.companylink {
  color: #0e3158;
  text-decoration: underline;
  font-weight: bold;
}

.manualtitle {
  float: left;
}

.editmanual {
  float: right;
  font-size: 25px;
  color: #113c69;
}

.wysiwyg {
  clear: both;
}

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.menuliststyle {
  list-style-type: none;
  padding: 0px;
}

.menuliststyle a {
  color: #10355e;
  font-size: 15px;
  margin-bottom: 5px;
}

.textcenter {
  text-align: center;
}

.logoheader {
  padding-top: 10px;
  padding-bottom: 10px;
  max-width: 200px;
}

.underlinelink {
  text-decoration: underline;
  color: #10355e;
}

.frontpageicon {
  color: #10355e;
  font-size: 18px;
}

.cover {
  object-fit: cover;
}

.pbottom-0 {
  padding-bottom: 0px !important;
}

.ptop-0 {
  padding-top: 0px !important;
}

.chapter {}

.font-10 {
  font-size: 10px;
}

.h45 {
  height: 45px;
}

.mtop10 {
  margin-top: 8% !important;
}

.font-12 {
  font-size: 12px;
}

.tabheight-100 {
  height: 100px;
}

.col-xl-custom {
  flex: 0 0 20%;
  max-width: 20%;
}

.dashicon {
  text-align: center;
  padding: 5px;
  font-size: 40px;
  color: #113c69;
}

.tabheight {
  height: 120px;
}

.greydark {
  color: #272727;
}

.padding-0 {
  padding: 0px !important;
}

.shadowhover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.1s ease-in-out;
}

.shadowhover:hover {
  box-shadow: 0 5px 50px 3px rgba(0, 0, 0, 0.5);
  display: inherit;
}

.bigheader {
  font-size: 20px !important;
  margin-bottom: 20px !important;
}

.btnadd {
  color: #fff;
  background-color: #10355e;
  border-color: #10355e;
  margin-bottom: 20px;
}

.bgblue {
  background: radial-gradient(at 50% -20%, #1967a9, #0a1832) fixed !important;
}

.btnadd:hover {
  color: #fff;
  background-color: #051d38;
  border-color: #051d38;
  margin-bottom: 20px;
}

.actionbuttons {
  text-align: center;
}

.actionbuttons i {
  color: #0e3158;
  font-size: 25px;
}

.normblue {
  color: #10355e;
}

.btn-blue {
  background-color: #10355e !important;
  border: 1px solid #10355e !important;
}

.filestyle {
  background-color: #10355e;
}

.padding-025 {
  padding: 0.25rem !important;
}

.editwindowadmin {
  display: none;
}

.margininput {
  margin-bottom: 20px;
}

.activebutton {
  background-color: #10355e;
}

.activebutton i {
  color: #fff;
}

.activebutton h4 {
  color: #fff;
}

.editcontent {
  float: right;
}

.editcontent i {
  font-size: 30px;
  color: #10355e;
  cursor: pointer;
}

.table {
  width: 100% !important;
}

.nav-pills .nav-item.show .nav-link,
.nav-pills .nav-link.active {
  background-color: #10355e !important;
}

.fullwidth {
  width: 100%;
}

.font-15 {
  font-size: 15px;
}

/* .h60{
  height: 60px;
} */

@media only screen and (max-width: 800px) {
  .menuliststyle {
    list-style-type: none;
    padding: 0px;
    max-width: 90%;
  }
  .btnadd {
    color: #fff;
    background-color: #10355e;
    border-color: #10355e;
    margin-bottom: 20px;
    font-size: 15px !important;
    display: block !important;
    margin: 0 auto;
    margin-bottom: 20px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<span id="sortablecats" class="ui-sortable">
  <div>
   <label class="categorytitle ui-sortable-handle" style="">jjjj</label>
   <div class="row ui-sortable-handle" id="questionrow">
      <div class="col-md-8">
         <p class="questionclass">hhhh</p>
      </div>
      <div class="col-md-4">
         <div class="container text-right">
            <input type="radio" name="questionlist[jjjj][hhhh]" id="radio-1" value="ok" required="">
            <label class="radiotoggle" for="radio-1"><span class="radio">Ok</span></label>
            <input type="radio" name="questionlist[jjjj][hhhh]" id="radio-2" value="fout" checked="">
            <label class="radiotoggle" for="radio-2"><span class="radio">Fout</span></label>
            <input type="radio" name="questionlist[jjjj][hhhh]" id="radio-3" value="nvt">
            <label class="radiotoggle" for="radio-3"><span class="radio">N.v.t</span></label>
        </div>
      </div>
      <div class="col-md-8">
        <p class="questionclass">jjj</p>
      </div>
      <div class="col-md-4">
        <div class="container text-right">
          <input type="radio" name="questionlist[jjjj][jjj]" id="radio-4" value="ok" required="" checked="">
          <label class="radiotoggle" for="radio-4"><span class="radio">Ok</span></label>
          <input type="radio" name="questionlist[jjjj][jjj]" id="radio-5" value="fout">
          <label class="radiotoggle" for="radio-5"><span class="radio">Fout</span></label>
          <input type="radio" name="questionlist[jjjj][jjj]" id="radio-6" value="nvt">
          <label class="radiotoggle" for="radio-6"><span class="radio">N.v.t</span></label>
        </div>
      </div>
    </div>
  </div>
  <div>
    <label class="categorytitle ui-sortable-handle" style="">Testt</label>
    <div class="row ui-sortable-handle" id="questionrow">
      <div class="col-md-8">
        <p class="questionclass">test</p>
      </div>
      <div class="col-md-4">
        <div class="container text-right">
          <input type="radio" name="questionlist[Testt][test]" id="radio-7" value="ok" required="">
          <label class="radiotoggle" for="radio-7"><span class="radio">Ok</span></label>
          <input type="radio" name="questionlist[Testt][test]" id="radio-8" value="fout" checked="">
          <label class="radiotoggle" for="radio-8"><span class="radio">Fout</span></label>
          <input type="radio" name="questionlist[Testt][test]" id="radio-9" value="nvt">
          <label class="radiotoggle" for="radio-9"><span class="radio">N.v.t</span></label>
        </div>
      </div>
    </div>
  </div>
</span>