Блог

Я пытаюсь создать интерфейс, который открывает раздел с несколькими модулями, которые можно перетаскивать.

Я начал с создания скелета интерфейса, используя взлом флажка, чтобы открывать и закрывать раздел, но по какой-то причине я не могу взаимодействовать с div внутри. Всякий раз, когда я ставлю «курсор: переместить», мышь не реагирует и даже не может выбрать div.

Я попытался передать «курсор: переместить;» родительским элементам, чтобы увидеть, с каким div взаимодействует, и это были «.разделы», но я не знаю, что в этом div вызывает такое поведение.

Вот код :

https://jsfiddle.net/7kyp3jsc/2/

 <div class="warper">

  <form class="mode">
    <label>
      <input type="radio" name="mode" value="simple" checked>
      <span>Simple</span>
    </label>
    <label>
      <input type="radio" name="mode" value="avance">
      <span>Avancé</span>
    </label>
  </form>
  <div class="sections">      
    <input type="checkbox" id="sections" value="sections">
    <label for="sections">Sections</label>
    <div class="winsec win1">
      <div class="tsection"></div>
    </div>
  </div>
  <div class="sections">  
    <label for="sections2">Sections</label>
    <input type="checkbox" id="test" value="sections2">
    <div class="winsec win2">
      <div class="tsection"></div>
    </div>
  </div>
</div>
 

     
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: Arial, Helvetica, sans-serif;
      display: flex;
      width: 100%;
      height: 200vh;
      background-color: #d3c7ae;
      flex-direction: column;
    }
    
    .warper {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      padding: 2em 4em;
      background-color: #706c63;
      border: 3px solid blue;
    }
    
    
    .sections {
      position: relative;
      height: auto;
      display: flex;
      flex-flow: row wrap;
      margin: 0 auto;
      width: 24rem;
      border: 2px solid pink;
      transition: 0.4s;
      overflow: hidden;  
      cursor: pointer;
    }
    
    
    .sections label {
      border: 2px solid red;
      width: 100%;
    }
    
    
    .sections input {
      position: absolute;
      top: 0;
      left: 0;
      border: 2px solid yellow;
      width: 100%;
      height: 22px;
      cursor: pointer;
    }
    
    .winsec {
      pointer-events: none;
      height: 0em;
      width: 100%;
      border: 2px solid green;
      background: green;  
    }
    
    #sections:checked ~ div,
    #test:checked ~ div {
      height: 15rem;
      transition: 0.4s ease-out;
    }
    
    #sections:not(:checked) ~ div,
    #test:not(:checked) ~ div {
      height: 0rem;
      transition: 0.4s ease-out;
    }
    
    .tsection {
      height: 50px;
      width: 50px;
      background: $brown;
      cursor: move;
    }
    
    .mode {
      display: flex;
      margin: 0 auto;
      max-width: 24em;
      padding: 0 1.5em;
      border: 3px solid pink;
    }
    
    .mode,
    .mode label {
      width: 100%;
    }
    
    .mode label {
      cursor: pointer;
      position: relative;
      height: auto;
    }
    
    .mode label span {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0.5em 2em;
      background: $brown;
      color: $beige;
      transition: 0.5s;
    }
    
    input[type=radio] {
      position: absolute;
      opacity: 0;
      height: 0;
      width: 0;
    
    }
    
    input[type=checkbox] {
      opacity: 0;
    }
    
    .mode label input:checked   span {
      opacity: 1;
      background: $green;
    }
    
    .mode label input:focus {
      outline: transparent;
    }