SOURCE

window.onload = function() {
  var dest=document.getElementById("dest");
  var dsHandler=function(e){
    console.log(e);
    e.dataTransfer.setData("text/plain","<item>"+ e.target.innerHTML);
  };
  dest.ondrop=function(e){
    var text= e.dataTransfer.getData("text/plain");
    if(text.indexOf("<item>")==0){
      var newEle=document.createElement("div");
      newEle.id=new Date().getUTCMilliseconds();
      newEle.innerHTML=text.substring(6);
      newEle.draggable="true";
      newEle.ondragstart=function(e){
        e.dataTransfer.setData("text/plain","<remove>"+newEle.id);
      };
    dest.appendChild(newEle);
    }
  };
  document.getElementById("gb").ondrop=function(e){
    var id= e.dataTransfer.getData("text/plain");
    if(id.indexOf("<remove>")==0){
      var target=document.getElementById(id.substring(8));
      dest.removeChild(target);
    }
  };
  document.ondragover=function(e){
    return false; 
  }; 
  document.ondrop=function(e){ 
    return false; 
  }
  var dragItems = document.querySelectorAll('div[draggable="true"]');
  for (let dragItem of dragItems) {
    //console.log(dsHandler);
    dragItem.addEventListener('dragstart', dsHandler);
  }
}

<div style="width:600px;border:1px solid black">
<h2>拖动收藏</h2>
<div draggable="true">中国</div>
<div draggable="true">美国</div>
<div draggable="true">小日本</div>
<div draggable="true">印度</div>
<div draggable="true">垃圾越南</div>
<div draggable="true">垃圾泰国</div>
</div>
<div id="dest" style="width:400px;height:400px;border:1px solid black;float:left">
<h2 ondragleave="return false">收藏夹</h2>
</div>
<img src="us.png" alt="垃圾桶" draggable="false" id="gb" style="float:left"/>