Php 拖放以更改数据库中的顺序

对此可能有一个非常简单的解决方案，但我就是没能想清楚

我正在处理一个图像库管理页面。我使用的是一个拖放界面，用户可以管理他们画廊的顺序和内容

到目前为止，拖放工作非常完美。当我拖动一个图像并将其放到另一个图像上时，它们会交换位置。就像魔术一样

作为一个彻头彻尾的傻瓜，我很高兴能走到这一步

这就是我被困了好几天的地方。我正试图找到一种方法将这些图像链接到它们的新位置，这样我就可以将这些信息提交到数据库中

我想有一种方法可以让javascript创建名为匹配列的变量，并将图像ID分配给占据其位置的列。我还不知道怎么做

我也愿意接受其他想法

以下是我的PHP：

$result = mysqli_query($con, "
SELECT *
FROM `gallery`
WHERE `order`") or die(mysqli_error());

$i = 0;
while ($row=mysqli_fetch_array($result))
    {
    $i++;
    echo "<div id=columns>";
    echo "<div class='column' id='c".$i."'><header>" . $i . "</header>";
    echo "<div class='columncontent' draggable='true'><img src='../gallery/gimages/" . $row['file'] . "' width='75px' title='" .$row['name']. "' id='i" .$row['id']. "'><br>" . $row['name'] . "</div></div></div>";
    }

这是我的javascript

<script type="text/javascript">

var dragSrcEl = null;

function handleDragStart(e) {

    dragSrcEl = this;

    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', this.innerHTML);
    e.dataTransfer.setData('text/plain', this.innerHTML);
    }

    var cols = document.querySelectorAll('#columns .columncontent');
    [].forEach.call(cols, function(col) {
    col.addEventListener('dragstart', handleDragStart, false);
    });

function handleDragOver(e) {
    if (e.preventDefault) {
    e.preventDefault(); 
    }

    e.dataTransfer.dropEffect = 'move'; 

    return false;
    }

function handleDragEnter(e) {
    this.classList.add('over');
    }

function handleDragLeave(e) {
    this.classList.remove('over');
    }

function handleDrop(e) {

    if (e.stopPropagation) {
    e.stopPropagation();
    }

    if (dragSrcEl != this) {
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/plain');
    }

    return false;
    }

function handleDragEnd(e) {

    [].forEach.call(cols, function (col) {
    col.classList.remove('over');
    });
    }

    var cols = document.querySelectorAll('#columns .columncontent');
    [].forEach.call(cols, function(col) {
    col.addEventListener('dragstart', handleDragStart, false);
    col.addEventListener('dragenter', handleDragEnter, false)
    col.addEventListener('dragover', handleDragOver, false);
    col.addEventListener('dragleave', handleDragLeave, false);
    col.addEventListener('drop', handleDrop, false);
    col.addEventListener('dragend', handleDragEnd, false);
    });

</script>

---

谢谢您的帮助。

您的桌子结构是什么样的？是否有ID字段？警告：不要试图重新发明轮子；-看看这个：例如，对于初学者，您首先在哪里显式地设置顺序？当前，您正在以从数据库返回的任何顺序显示记录。如果要显式地对它们进行排序，则需要一列来保存该整数排序，在添加记录时使用排序顺序填充该列，并更新所有旧记录，将SELECT查询排序为使用该列，并在排序顺序发生任何变化时更新该列的值，这可能是在JavaScript.David中的drop事件的AJAX调用中发生的——排序由数据库的order列设置。碰巧的是，当前它与id列的顺序相同。id列是我的主索引。“订单”列是我想要编辑的内容。@Pieter-这看起来是一个很好的解决方案。谢谢你。在做了几个星期之后，我觉得这是一个全新的开始。我想如果我要继续做这件事，我最好习惯它。