<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>

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;
}