为什么新添加的UL不接受拖放?

时间:2011-06-17 11:55:05

标签: javascript dom drag-and-drop dojo

我正在使用Dojo的Drag& amp;删除功能以创建可排序的多维列表。

现在,当我添加代码时会在悬停的LI中生成一个新的UL,当它拖动到它上面时,新生成的UL不会接受要拖入的项目。

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)
    {
        dojo.connect(node, "onmouseover", node, "ListViewInsertList");
        dojo.connect(node, "onmouseout", node, "ListViewInsertListAbort");
    });
}

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

我的HTML看起来像这样:

<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>

那么我如何告诉Dojo,新添加的UL对于要放入的项目是否有用?

2 个答案:

答案 0 :(得分:0)

当您运行onLoad回调时,它会抓取现有元素并将行为添加到它们。

我猜这是因为你要添加新东西,你需要再次运行那段特定代码,以便将事件附加到新元素。

答案 1 :(得分:0)

新添加的代码不会绑定事件。您可以通过编写活页夹功能再次添加它们。

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

并在此处添加

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)
  {