Question

我到处寻找，似乎无法找到解决方案。我正在使用HTML5的原生拖放功能，这些功能很棒，直到我将卡片拖到另一张卡片上并且它们正在组合。我不希望它们结合在一起，而是放在下一张卡片下面。

我认为它与appendChild有关，或者这些卡在droppable包装器中的事实？但我似乎无法找到另一种方式......任何帮助？

codepen在这里：https://codepen.io/_and_why_/pen/RyVGPG

<div class="wrap__global">
    <div class="wrap__col col__ideas" id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
        <h2 class="col__title">Ideas</h2>
        <div id="card0" class="wrap__card" draggable="true" ondragstart="dragstart_handler(event);">
            <h2>Dmmy Idea</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, libero asperiores! Iusto ut, est, facilis dignissimos assumenda sit neque blanditiis deleniti eum libero facere aspernatur numquam repudiandae quas labore enim!</p>
        </div>
        <div id="card1" class="wrap__card" draggable="true" ondragstart="dragstart_handler(event);">
            <h2>Dmmy Idea 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, libero asperiores! Iusto ut, est, facilis dignissimos assumenda sit neque blanditiis deleniti eum libero facere aspernatur numquam repudiandae quas labore enim!</p>
        </div>
    </div>
    <div class="wrap__col col__prom"  id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
        <h2 class="col__title">Promising</h2>
        <div id="card2" class="wrap__card" draggable="true" ondragstart="dragstart_handler(event);">
            <h2>Dummy promise</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex necessitatibus nobis quasi odit, harum quis culpa. Ad blanditiis deleniti officia, at ducimus ratione, aliquam, ullam, architecto eum tempora nam nulla!</p>
        </div>
    </div>
    <div class="wrap__col col__do" id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
        <h2 class="col__title">Do</h2>
        <div id="card3" class="wrap__card" draggable="true" ondragstart="dragstart_handler(event);">
            <h2>Do dummy idea 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi unde non dolor corporis repellendus neque modi? Excepturi soluta placeat, quos aliquam enim, tenetur aspernatur officiis hic, quia, rerum iusto alias!</p>
        </div>
    </div>
</div>

const card = document.querySelectorAll('.wrap__card');
const columns = document.querySelectorAll('.wrap__col');

function dragstart_handler(e) {
    e.dataTransfer.setData('text/plain', e.target.id);
    e.dropEffect = "move";
}

function dragover_handler(e) {
    e.preventDefault();
  e.stopPropogation();
    e.dataTransfer.dropEffect = "move";
}
function drop_handler(e) {
    e.preventDefault();
    var data = e.dataTransfer.getData("text/plain");
    e.target.appendChild(document.getElementById(data));
}

Answer 1

如果有其他人来看，我想出来了。我在卡片上添加了noAllowDrop函数，现在你无法在它们上面拖动。

<div id="card2" class="wrap__card" draggable="true" ondragstart="dragstart_handler(event);" ondragover="noAllowDrop(event)">
            <h2>Dummy promise</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex necessitatibus nobis quasi odit, harum quis culpa. Ad blanditiis deleniti officia, at ducimus ratione, aliquam, ullam, architecto eum tempora nam nulla!</p>
    </div>


function noAllowDrop(ev) {
    ev.stopPropagation();
}

如何停止拖放冒泡？

1 个答案: