Why doesn't a newly added UL accept Drag'n'Drop?

I am using Dojo's Drag & Drop functionality to create a sortable mutlidimensional list.

Now, when I added code that will spawn a new UL inside a hovered LI when dragging something onto it, the newly spawned UL won't accept items to be dragged into.

dojo.addOnLoad(function ()
{
    dojo.query(".listview").forEach(function(node, index, arr)
    {
        dojo.connect(node, "onmouseover", "ListViewInsertList");
        dojo.connect(node, "onmouseout", "ListViewInsertListAbort");
    });
});

var hovernode = null;
var timeout = null;

function ListViewInsertList(e)
{
    console.log("Hover caught.");
    if (dojo.query(".dojoDndAvatar").length > 0)
    {
        console.log("DND is active!");
        hovernode = e.target;
        timeout = window.setTimeout("ListViewInsertListDo()", 1000);
    }
}

function ListViewInsertListDo()
{        
    dojo.create("ul", { dojoType: "dojo.dnd.Source", className: "container listview" }, hovernode);

    dojo.query(".listview").forEach(function(node, index, arr)
    开发者_JAVA技巧{
        dojo.connect(node, "onmouseover", node, "ListViewInsertList");
        dojo.connect(node, "onmouseout", node, "ListViewInsertListAbort");
    });
}

function ListViewInsertListAbort()
{
    window.clearTimeout(timeout);
}

My HTML looks something like this:

<ul dojoType="dojo.dnd.Source" selfAccept="true" class="container listview">
     <li class="dojoDndItem listviewitem">abc</li>
     <li class="dojoDndItem listviewitem">def
          <ul dojoType="dojo.dnd.Source" selfAccept="true" class="container listview">
               <li class="dojoDndItem listviewitem">ghi</li>
          </ul>
     </li>
</ul>

So how do I tell Dojo, that the newly added UL is good for items to be dropped into?

The newly added code will not have the events bound to them. You can add them again by writing a binder function.

function bindUL ( node ) {
  return dojo.connect(node, "onmouseover", "ListViewInsertList");
}

and add it here

function ListViewInsertListDo()
{        
  var x = dojo.create("ul", { dojoType: "dojo.dnd.Source", className: "container listview" }, hovernode);
  bindUL(x);
  dojo.query(".listview").forEach(function(node, index, arr)
  {

When you run the onLoad callback, it grabs existing elements and adds the behaviour to them.

I'm guessing that because you're adding new stuff, you'll need to run that specific bit of code again so that the events are attached to the new elements.