ondragstart: 用户开始拖动元素时触发
ondrag: 元素正在拖动时触发
ondragend: 用户完成元素拖动后触发

ondragenter: 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover: 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave: 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop: 在一个拖动过程中，释放鼠标键时触发此事件


function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    //获取当前拖动元素ID，并设置到DataTransfer中
    ev.dataTransfer.setData("id", ev.target.id);
    var dragID = ev.target.id;
    //获取当前拖动元素的innerHTML，并设置到DataTransfer中
    ev.dataTransfer.setData("text", document.getElementById(dragID).innerHTML);
    ev.dataTransfer.setData("name", document.getElementById(dragID).title);
}

function drop(ev) {
    ev.preventDefault();
    //获取DataTransfer中的ID值
    var dragID = ev.dataTransfer.getData("id");
    var dragText = ev.dataTransfer.getData("text");
    var dragName = ev.dataTransfer.getData("name");

    //获取目标元素的id；
    var id = ev.target.id;
    //将字符串分割为数组
    var arr = id.split("");

    if (arr[0] == 'p') {
        var forid = document.getElementById(id).getAttribute("for");
        document.getElementById(forid).dataset.channel = dragID;
    }

    arr[0] = 'p';
    //将数组合并为字符串
    var pID = arr.join("");

    //p标签显示为被拖动标签的名称
    document.getElementById(pID).innerHTML = dragName;
    //input元素赋值为物理通道ID
    //document.getElementById(id).value = dragID;
    //将物理通道保存到data-content中
    document.getElementById(id).dataset.channel = dragID;
    //修改title与通道相同
    document.getElementById(pID).title = dragText;

    //dic_cfg[id] = dragID;
}

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
	<p ondragstart="drag(event)" draggable="true" id="dragtarget">拖动我!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>