Edit in JSFiddle

var items=document.querySelectorAll("#dropItem li");


for(var i=0; i<items.length; i++){
    items[i].draggable=true;
    items[i].addEventListener("dragstart",function(event){
    //setdata
    event.dataTransfer.setData("text",event.target.innerHTML);
    },true);
}

//droparea
var droper=document.getElementById("dropArea");

//drop event
droper.addEventListener("drop",function(event){
//default cancel
    event.preventDefault();
//getdata
    var items=event.dataTransfer.getData("text");
    try{
    droper.innerHTML+=items;
    }catch(e){
    droper.innherHTML+="データないっす";
    }
//
    droper.style.backgroundColor="#eee";
},true);

//dragenter
droper.addEventListener("dragenter",function(event){
//default cancel
    event.preventDefault();
    
    droper.style.backgroundColor="#ecc";
},true);

//dragleave
droper.addEventListener("dragleave",function(event){
//default cancel
    event.preventDefault();
    
    droper.style.backgroundColor="#ccc";
},true);

//dragover
droper.addEventListener("dragover",function(event){
//default cancel
    event.preventDefault();
},true);

<div id="dropItem">
    <ul>
        <li name="test">item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</div>
<div id="dropArea">
    <P>drop area</p>
</div>

div#dropArea{
    margin-left:50px;
    clear:both;
    width:300px;
    height:300px;
    background-color:#ccc;
}
div#dropItem{
 
    margin-left:50px;
  margin-bottom:20px;
}
div#dropItem:after{
    content:"";
    display:block;
    zoom:1;
    clear:both;
}

div#dropItem li{
    float:left;
    margin-right:5px;
    display:block;
    width:50px;
    height:20px;
    background-color:#ff0000;
}