Как остановить перетаскивание Drag and Drop? - PullRequest
Новая
       8

Как остановить перетаскивание Drag and Drop?

0 голосов
/ 02 мая 2018

Я искал везде и не могу найти решение. Я использую встроенные в HTML5 функции перетаскивания, которые прекрасно работают, пока я не перетаскиваю карту поверх другой карты, и они не объединяются. Я не хочу, чтобы они объединились, но бросили под следующую карту.

Я предполагаю, что это как-то связано с appendChild или тот факт, что карты находятся в оберточной оболочке? Но я не могу найти другой способ ... Любая помощь?

Кодовый код здесь: 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));
}

1 Ответ

0 голосов
/ 03 мая 2018

На случай, если кто-нибудь еще придет посмотреть, я понял это. Я добавил функцию 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();
}
...