Javascript拖放操作仅适用于彼此相邻的表格单元格

Question

我有一个HTML表，由Django用以下代码填充：

<table id="gallery_table">
    <tr>
        {% for pic in pictures %}
            <td id="picture_{{ pic.id}}" draggable="true" ondragover="dragOver(event)" ondragstart="dragStart(event)">
                <a href="{% url 'details' pic.id %}">
                    <img src="{{ pic.bild_thumbnail.url }}">
                </a><br>
                <span><i>{{ pic.num }}</i> - {{ pic.title }}</span>
            </td>
            {% if forloop.counter|divisibleby:4 %}
                </tr><tr>
            {% endif %}
        {% endfor %}
    </tr>
</table>

这是JS代码：

var _el;

function dragOver(e) {
    let element1 = _el;
    let element2 = e.target;

    if (element1.parentNode == element2.parentNode){
        if (isBefore(element1, element2)){
            element2.parentNode.insertBefore(element1, element2);
        }
        else{
            element2.parentNode.insertBefore(element1, element2.nextSibling);
        }
    }
    else{
        let element1_copy = element1.cloneNode(element1);
        let element2_copy = element2.cloneNode(element2);

        element1.parentNode.replaceChild(element2_copy, element1);
        element2.parentNode.replaceChild(element1_copy, element2);
    }
}

function dragStart(e) {
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/plain", null);
    _el = e.target;
}

仅当您完美地选择边界的元素并交换它们（彼此相邻）时，拖放才起作用。我希望它像大多数拖放解决方案一样工作。现在，当您将鼠标拖到图片上方或有时直接在开始时，视图变得混乱。

  

我尝试了来自不同站点和教程的许多更改和想法（例如，创建了一个单独的类，例如“ no_drag”并进行检查），但我认为目前我在做一些根本错误的事情，因为这种拖放操作实际上是坏。因此，感谢您的帮助和提示。