Html拖放-将浮动的拖放项目定位到光标

<div draggable="true">拖动源</div>

<script>
    var dragSource = document.querySelector('div');
    dragSource.addEventListener('dragstart', function(event) {
        // 拖动开始时执行的操作
    });
    dragSource.addEventListener('drag', function(event) {
        // 拖动过程中执行的操作
    });
    dragSource.addEventListener('dragend', function(event) {
        // 拖动结束时执行的操作
    });
</script>

<div ondragover="event.preventDefault()">放置目标</div>

<script>
    var dropTarget = document.querySelector('div');
    dropTarget.addEventListener('dragenter', function(event) {
        // 拖放元素进入放置目标时执行的操作
    });
    dropTarget.addEventListener('dragover', function(event) {
        // 拖放元素在放置目标上方移动时执行的操作
        event.preventDefault(); // 阻止默认的放置行为
    });
    dropTarget.addEventListener('dragleave', function(event) {
        // 拖放元素离开放置目标时执行的操作
    });
    dropTarget.addEventListener('drop', function(event) {
        // 拖放元素放置到放置目标时执行的操作
    });
</script>