Question

我正在尝试创建一个任务管理器，该任务管理器允许我在创建元素之后上下上下拖动元素。我正在使用jquery .before（）方法来实现此目的，但是尽管在drop（）函数中包含ev.stopPropagation，该元素的子对象（最好是将事件应用于该子对象）也继承了导致错误行为的功能。

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（）应用于列表项，而是还应用于其子项（div）。结果是，当我将一个列表项放到另一个列表项上时，它会附加到该列表项上，而不是放在它之前。这是因为内部div之一正在使用drop（）。如何停止呢？

即使使用stopPropagation，向儿童传播的ondrop事件

0 个答案: