нежелательный побочный эффект от эффекта перетаскивания

Question

Я использовал CSS, чтобы создать несколько круговых текстовых элементов и позволить пользователям перетаскивать элементы между несколькими элементами div.Набор Javascript Кроме того, я мог перетаскивать окружность в разные элементы div, я также мог перетаскивать текст окружности на другой текст окружности, который мне вообще не нужен.Я не установил allowdrop для круга-текста, я не знаю, как этого избежать

, когда я помещаю круг-текст № 10 в эту вкладку, он отлично работает

Когда я случайно положил круговой текст № 13 на № 10, он придерживается, и вы видите, что его код теперь находится под круговым текстом № 10

И это дает мне такую ​​ошибку

Я подумал, связано ли это со свойствами div1, применяемыми ко всем элементам под ним;тем не менее, я не уверен, что это правильно.

Я также подумал о корнях этой проблемы из этого кода ev.target.appendChild (document.getElementById (data)) Но данные, которые я установил, представляют собой текст, которыйявляется идентификатором цели, и я не думаю, что он возвращает нулевое значение.

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

Javascript

<script>
function allowDrop(ev) {
ev.preventDefault();
}


function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>

CSS

    .circle-text {
    display: table-cell;
    height: 30px;
    width: 30px;
    text-align: center;
    vertical-align: middle;
    border-radius: 45%;
    background: #000;
    color: #fff;
    font: 20px "josefin sans";
    float:left;

.div1 {
    position:relative;
    width: 25%;
    height: 100%;
    align-items:flex-start;
    float:left;
    border:1px solid black;
    box-sizing: content-box;
    word-wrap:break-word;
    text-overflow: clip;
    white-space: normal;
}

HTML

<div id="bmhipnotfit" class="div1" ondrop="drop(event)" 
ondragover="allowDrop(event)">
    <div class="circle-text" draggable="true" ondragstart="drag(event)" 
    id="drag1">1</div>
    <div class="circle-text" draggable="true" ondragstart="drag(event)" 
    id="drag3">3</div>
</div>
<div id="bfhipnotfit" class="div1" ondrop="drop(event)" 
ondragover="allowDrop(event)"></div>
<div id="cmhipnotfit" class="div1" ondrop="drop(event)" 
ondragover="allowDrop(event)">
    <div class="circle-text" draggable="true" ondragstart="drag(event)" 
    id="drag4">4</div>
    <div class="circle-text" draggable="true" ondragstart="drag(event)" 
    id="drag5">5</div>
    <div class="circle-text" draggable="true" ondragstart="drag(event)" 
    id="drag6">6</div></div>
<div id="cfhipnotfit" class="div1" ondrop="drop(event)" 
ondragover="allowDrop(event)"></div>