0

これにはおそらく非常に簡単な解決策がありますが、私はそれを考え抜くことができませんでした.

画像ギャラリーの管理ページを作成しています。ユーザーがギャラリーの順序とコンテンツを管理できるように、ドラッグ アンド ドロップ インターフェイスを使用しています。

これまでのところ、ドラッグ アンド ドロップは完璧に機能します。ある画像をドラッグして別の画像にドロップすると、場所が入れ替わります。魔法のように。

完全な初心者なので、そこまで到達できてとてもうれしかったです。

これが私が何日も立ち往生している場所です。その情報をデータベースに送信できるように、画像を新しい位置にリンクする方法を見つけようとしています。

列に一致する名前の変数を作成し、その位置を占めるイメージ 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>

ご協力いただきありがとうございます。

4

0 に答える 0