Using HTML5 Drag and Drop for list elements

I have HTML:

 <li class='has-sub'><a href='#'>Registration</a>
            <ul ondragstart="drag(event)" draggable="true">
               <li><a href='1'>Register for Classes</a></li>
               <li><a href='2'>Retake a Course (Academic Forgiveness)</a></li>
               <li><a href='3'>View Your Holds</a></li>

and so on. It's a menu that displays some links. I also have another menu that should allow the user to drop "favorite links" into it:

 <div id="myFavorites" ondrop="drop(event)" ondragover="allowDrop(event)">
    <ul>
        <li class='has-sub'><a href='#'>My Favorites</a>
             <ul id="favoritesList">
                <li><a href='#'>Test1</a></li>
                <li><a href='#'>Test2</a></li>
                <li><a href='#'>Test3</a></li>
                <li><a href='#'>Test4</a></li>
             </ul>
         </li>
    </ul>   
</div>

My javascript appears to be correct:

function drop(ev) {
    //alert("Got here");
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    //var html = ev.dataTransfer.getData("text/html");

    document.getElementById('favoritesList').appendChild(document.getElementById(data).cloneNode(true));
//$("#favoritesList").append(document.getElementById(data));
}

However, when I drag the top menu to the bottom, it doesn't append the entire "li" element to the favorites, only the element inside of it. I've also tried adding the ondragstart="drag(event)" draggable="true" to each individual "li" element, but it's producing the same results. Any suggestions?