SOURCE

let dragged;

/* 在可拖动的目标上触发的事件 */
const source = document.getElementById("draggable");

source.addEventListener("dragstart", (event) => {
    // 保存被拖动元素的引用
    dragged = event.target;
    // 设置为半透明
    event.target.classList.add("dragging");
});

source.addEventListener("dragend", (event) => {
    // 拖动结束，重置透明度
    event.target.classList.remove("dragging");
});

/* 在放置目标上触发的事件 */
const leftTarget = document.getElementById("leftTarget");
const rightTarget = document.getElementById("rightTarget");

leftTarget.addEventListener(
    "dragover",
    (event) => {
        // 阻止默认行为以允许放置
        event.preventDefault();
    },
    false,
);

leftTarget.addEventListener("drop", (event) => {
    // 阻止默认行为（会作为某些元素的链接打开）
    event.preventDefault();
    // 将被拖动元素移动到选定的目标元素中
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
});

rightTarget.addEventListener(
    "dragover",
    (event) => {
        // 阻止默认行为以允许放置
        event.preventDefault();
    },
    false,
);

rightTarget.addEventListener("drop", (event) => {
    // 阻止默认行为（会作为某些元素的链接打开）
    event.preventDefault();
    // 将被拖动元素移动到选定的目标元素中
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
});

<div class="header">
	<div class="left" id="leftTarget">
        <div class="share" id="draggable" draggable="true">分享</div>
	</div>
	<div class="right" id="rightTarget">
	</div>
</div>

.header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}
.left,.right{
    width: 50%;
    height: 100%;
    border: 1px solid gray;
}
.left,.right{
    display: flex;
    align-items: center;
    padding: 0 15px
}
.left{
    justify-content: flex-start;
}
.right{
    justify-content: flex-end;
}

.share{
    background-color: blueviolet;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}

.dragging {
  opacity: 0.5;
}