【JavaScript】要素のドラッグ＆ドロップ

このように投稿した要素のドラッグ＆ドロップができるよう実装します。

投稿した要素のドラッグ＆ドロップ

<?php
foreach ($memos as $memo) :
?>
<div class="memo">
 <div class="memo_text"><?= $memo['text'] ?></div>
</div>
<?php endforeach ?>

投稿をブラウザに表示します。
次に、JavaScriptでドラッグ＆ドロップを実装します。

$(document).on('dblclick', '.memo', function(event) {
    let memo = document.querySelector('.memo');
    let currentDroppable = null;
    let currentDroppable_memogroup = null;
    let currentDroppable_memogroup_create = null;
    let shiftX = event.clientX - ball.getBoundingClientRect().left;
    let shiftY = event.clientY - ball.getBoundingClientRect().top;

    //絶対位置で一番上になるように
    memo.style.position = 'absolute';
    memo.style.zIndex = 5;

    //対象オブジェクトをbody要素に追加
    document.body.append(memo);

    moveAt(event.pageX, event.pageY);

    function moveAt(pageX, pageY) {
        memo.style.left = pageX - shiftX + 'px';
        memo.style.top = pageY - shiftY + 'px';
    }

    function onMouseMove(event) {
        moveAt(event.pageX, event.pageY);

        memo.hidden = true;
        let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
        memo.hidden = false;
    }
    document.addEventListener('mousemove', onMouseMove);

    memo.onmouseup = function() {
        document.removeEventListener('mousemove', onMouseMove);
        memo.onmouseup = null;
    };
});

対象の要素をダブルクリックしたときに、関数moveAtとonMouseMoveを呼び出しています。
mousemoveでleft/topを変更しています。

ドラッグ中の要素を別要素にドラッグ

ドラッグ中の要素が別要素に重なるまたは離れた場合、処理が走るようにします。

:
    document.addEventListener('mousemove', onMouseMove);

        let droppableBelow = elemBelow.closest('.memo');

        if (currentDroppable != droppableBelow) {
　　　　　　 // ドラッグ中の要素が別の要素から離れた場合
            if (currentDroppable) { 
　　　　　　 　alert('離れました');
            }

　　　　　　 // ドラッグ中の要素が別の要素に重なった場合
            currentDroppable = droppableBelow;
            if (currentDroppable) { 
　　　　　　 　alert('重なりました');
            }
        }

このように別要素に重なったかどうか、判定できるようになります。

参考URL