Блог

У меня есть перетаскиваемый div, который можно перетащить и поместить в другую позицию списка. Внутри этого div я использовал диапазон ввода. Когда я сдвигаю этот диапазон, мой div также перетаскивается.Я пытался использовать stopPropagation для своего диапазона, но я не препятствовал перетаскиванию моего div при использовании ползунка диапазона.

Это мой общий div, который можно перетаскивать, и внутри этого div используется ползунок диапазона ввода

 <li class="column" draggable="true" id="{{layer.alternate|slice:'8:'}}">
   <div class="inserted-card noprint" style="padding: 1rem" id="{{layer.title|cut:" "}}">
   <div class="layer-card">
      <div class="pt-3 d-flex justify-content-end"
         style="width: 100%;text-align: right;">
         <div style="padding: 1rem; display: flex;justify-content: space-between">
            <h4 class="mr-4 base-layer-title">Opacity </h4>
            <input type="range" name="yearInputName" onchange="changeOpacity({{layer.alternate|slice:'8:'}},{{layer.title|cut:" "}})"
            id="opacity{{layer.alternate|slice:'8:'}}" value="100" min="0" max="100">
         </div>
      </div>
   </div>
   </div>
</li>
  

CSS для перетаскиваемого div

 [draggable] {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /* Required to make elements draggable in old WebKit */
    -khtml-user-drag: element;
    -webkit-user-drag: element;
  }
  
  #columns {
    list-style-type: none;
  }
  
  .column {
    width: 100%;
    padding-bottom: 5px;
    padding-top: 5px;
    text-align: center;
    cursor: move;
  }
  .column.dragElem {
    opacity: 1;
  }
  .column.over {
    /* border: 2px dashed #000; */
    border-top: 2px solid blue;
  }
  

Попробуйте получить точку из этого псевдокода.

 draggableElement.onclick = (event)=> {
     if(event.target == rangeInputElement)
        draggableElement.draggable = false;
     else
        draggableElement.draggable = true; 
 }