SOURCE

const up = document.querySelector('.up');
const wrap = document.querySelector('.wrap');
const dragEle = document.querySelector('.drag');

document.addEventListener("dragstart", transfer);
//document.addEventListener("dragend", delEle);

wrap.addEventListener("dragenter", showMask);
wrap.addEventListener("dragleave", hideMask);
wrap.addEventListener("drop", addEle);
wrap.addEventListener("dragover", preDef);

up.addEventListener("drop", addEle);
up.addEventListener("dragover", preDef);

function transfer() {
    event.dataTransfer.setData('name', 'drag-elememt');
    event.dataTransfer.setData('belong', event.target.getAttribute('data-belong'));
}
function delEle() {
    //up.removeChild(event.target);
}

function preDef() {
    event.preventDefault();
}

function showMask() {
    event.target.classList.add('mask');
}

function hideMask() {
    event.target.classList.remove('mask');
}

function addEle() {
    event.preventDefault();
    // if(event.dataTransfer.getData('belong') === 'B') return;
    // const moveEle = document.createElement('div');
    // moveEle.setAttribute('class', 'drag');
    // moveEle.setAttribute('draggable', true);
    // moveEle.setAttribute('data-belong', 'B');
    // moveEle.innerHTML = event.dataTransfer.getData('name');
    // wrap.appendChild(moveEle);
    hideMask();
    event.target.appendChild(dragEle);
}

<div class="plat">
    <div class="left">
    <div class="up">
        <div class="drag" draggable="true" data-belong="A">drag-element</div>
    </div>
    <div class="wrap"></div>
    </div>
    <div class="right">
        <h1>拖拽</h1>
        <h2>拖拽元素事件</h2>
        <section>
            <ul>
                <li>drag: 整个拖拽过程都会调用</li>
                <li>dragstart: 拖拽开始时调用</li>
                <li>dragleave: 当鼠标离开拖拽元素时调用（拖拽出拖拽元素的基础位置）</li>
                <li>dragend: 拖拽结束时调用</li>
            </ul>
        </section>
        <h2>目标元素事件</h2>
        <section>
            <ul>
                <li>dragenter: 拖拽元素进入时调用</li>
                <li>dragover: 拖拽元素停留在目标元素上时调用</li>
                <li>dragleave: 拖拽元素离开目标元素时调用</li>
                <li>drop: 在目标元素上松开鼠标时调用</li>
            </ul>
        </section>
        <section>
            <h2>PS:</h2>
            <p>监听dragover事件阻止默认事件 <em>//不执行默认处理（拒绝被拖放）</em>, 否则拖拽时鼠标为禁止拖拽样式</p>
        </section>
        <section>
            <h2>数据传送</h2>
            <p>
                与拖放操作所触发的事件同事派发的对象是DragEvent，并增加了dataTransfer属性。该属性用于保存拖放的数据和交互信息，返回DataTransfer对象。
            </p>
            <h3>属性</h3>
            <ol>
                <li>types：只读属性，它返回一个我们再dragstart事件中设置的拖动数据格式的数组；</li>
                <li>files：返回拖动操作中的文件列表。</li>
                <li>dropEffect：获取当前选定的拖动操作的类型或将操作设置为新类型。他应该始终设置成effectAllowed的可能值之一【none、move、copy、link】。dragover事件处理程序中针对放置目标来设置dropEffect。</li>
                <li>effectAllowed:必须是其中之一【 none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized】默认为uninitialized 表示允许所有的效果。ondragstart处理程序中设置effectAllowed属性。</li>
            </ol>
            <h3>方法</h3>
            <ol>
                <li>setData:设置拖放过程需要传递的数据</li>
                <li>getData:返回指定格式的数据</li>
                <li>clearData:删除给定类型的拖放操作的数据</li>
                <li>setDragImage:指定一副图像，当拖放发生时，显示在光标下方。大多数情况下不用设置，因为被拖动的节点被创建成默认图片。x，y参数分别指示图像的水平、垂直偏移量。</li>
            </ol>
        </section>
    </div>
</div>

.plat {
    display: flex;
    .left {
        width: 400px;
        .up {
            height: 120px;
        }
        .drag {
            width: 100px;
            height: 100px;
            background: red;
        }
        .wrap {
            margin-top: 20px;
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
        .mask {
            background: rgba(0, 0, 0, 0.2);
        }
    }
    .right {
        margin-left: 20px;
        flex: 1;
    }
}