Событие ondrop распространяется на детей даже при использовании stopPropagation

Question

Я пытаюсь создать диспетчер задач, который позволяет мне щелкать и перетаскивать элементы выше и ниже друг друга после их создания.Я использую метод jquery .before () для достижения этой цели, однако, несмотря на включение ev.stopPropagation в функцию drop (), дочерние элементы (в идеале, чтобы событие было применено) также наследуют функциональность, что приводит к неправильному поведению.

var currentItem;
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  currentItem = ev.target;
}

function drop(ev) {
  ev.preventDefault();
  ev.stopPropagation();
  console.log(ev.target);
  $(ev.target).before(currentItem)
}

Мой html, он в erb, потому что я занимаюсь разработкой в ​​Rails

        <% bucket.tasks.each do |t| %>
          <li class="list-group-item br-5 mb-1 taskItem" style="" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div class="row">
              <div class="col-10">
                <%= t.notes %>
              </div>
              <div class="col-2">
                <%= image_tag current_user.photo, class: "rounded-circle w-25" %>
              </div>
            </div>
          </li>
        <% end %>

То, что происходит, вместо того, чтобы drop () применялся только к элементу списка, такжеприменяется к своим детям (дивы).В результате, когда я помещаю один элемент списка поверх другого, он добавляется к нему, а не помещается перед ним.Это потому, что drop () используется одним из внутренних элементов div.Как мне это остановить?