Javascript 使用HTML5拖放列表元素
我有HTML:Javascript 使用HTML5拖放列表元素,javascript,jquery,html,Javascript,Jquery,Html,我有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&g
<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>
但是,当我将顶部菜单拖到底部时,它不会将整个“li”元素附加到收藏夹中,只将其中的元素附加到收藏夹中。我还尝试将ondragstart=“drag(event)”draggable=“true”添加到每个单独的“li”元素中,但结果相同。有什么建议吗?所有列表项都没有ID,因此带有
document.getElementById(数据)
的行没有意义……抱歉,它们在html标记中有。如果没有,我运行应用程序的平台将生成随机id。我发现问题在于href覆盖了整个“li”元素,所以当我尝试拖动li时,我得到的是href。任何关于解决这个问题的建议都会很好。我在想,当drop事件发生时,我只需要手动附加所需的html。
<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>
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));
}