Javascript 如何构建拖放菜单生成器？

大家好，我现在是菜单生成器上的wokring，用户可以随时使用subemnus来构建他的菜单，我在拖放方面有问题，我一直在做，直到拖放在我的情况下不起作用

我得做点像这样的事

但与此不同，我应该能够通过拖放创建一个链或树，我的场景是我在底部列出所有菜单，并在顶部添加列按钮，当用户想要构建菜单时，他可以单击addmenu按钮并在那里打开一列，他可以从列出的菜单中拖放菜单，从这里，我想要上面我给出的链接的工作场景，如果我点击任何菜单项，它应该是用户点击的父菜单项的子菜单项

这是我的剧本

$(document).ready(function() {
    var i = 0;
    $("button[id='columnadd']").click(function () {
       alert(1);
       var domElement = $('<aside id="shoppingCart' + i + '" class="shoppingCart"><h2 class="ui-widget-header">Add Menu Items Here</h2><aside class="ui-widget-content"><ol><li class="placeholder">Add your items here</li></ol></aside></aside>');
       i++;
       $(this).after(domElement);
    });

    $(".small_box li" ).draggable({
       appendTo: "body",
       helper: "clone"
    });
});          

$(".small_box li a").droppable({
   tolerance        : "pointer",
   hoverClass        : "tree_hover",
   drop            : function(event, ui){
       var dropped = ui.draggable;
       dropped.css({top: 0, left: 0});
       var me = $(this).parent();
       if(me == dropped)
           return;
       var subbranch = $(me).children("ul");
       if(subbranch.size() == 0) {
           me.find("a").after("<ul></ul>");
           subbranch = me.find("ul");
       }
       var oldParent = dropped.parent();
       subbranch.eq(0).append(dropped);
       var oldBranches = $("li", oldParent);
       if (oldBranches.size() == 0) { $(oldParent).remove(); }
   }
});

$（文档）.ready（函数（）{
var i=0；
$（“按钮[id='columnadd']）。单击（函数（）{
警报（1）；
变量domeElement=$（'

这里有谁能帮我一下吗？那对我来说是个很大的帮助。我正在为我犯过的错误而挣扎

我在单击时创建了一个DOM元素（即拖放区域），在您单击触发器之前，该元素不在您的页面中。通过执行

$（'#shoppingCart ol'）。可拖放（{…}）

在

$（document）.ready（function（）{}）

block您试图将

droppable

添加到一个甚至不在页面中的元素，因此这不会起作用

变化

我所做的是在创建该元素之后，使元素

可拖放

$("button[id='columnadd']").click(function () {
  // create the element
  var domElement = $('<aside id="shoppingCart' + i++ + '" class="shoppingCart"><h2 class="ui-widget-header">Add Menu Items Here</h2><aside class="ui-widget-content" id="droppable"><ol><li class="placeholder">Add your items here</li></ol></aside></aside>');

  // put it after $(this)
  $(this).after(domElement);
  // at this point you have domElement in your page

  // make it droppable
  domElement.find("ol").droppable({
    // put options here
    greedy: true,
    drop: function (event, ui) {
      makeItDroppableToo(event, ui, this);
    }
  });
});

$（“按钮[id='columnadd']）。单击（函数（）{
//创建元素
var domElement=$（“在此处添加菜单项”
在此处添加您的项”
）；
//把它放在$后面（这个）
$（this）.在（domElement）之后；
//此时，您的页面中有DomeElement
//让它可以放下
DOMELENT.find（“ol”）.可拖放({
//把期权放在这里
贪婪：没错，
drop：函数（事件、用户界面）{
makeItDroppableToo（事件、ui、this）；
}
});
});

这是一个函数，它可以让你删除的元素有自己的占位符

function makeItDroppableToo(e, ui, obj) {
  $(obj).find(".placeholder").remove();

  var placeholder = $("<ol><li class='placeholder'>You can also drop it here</li></ol>");
  $("<li></li>").append(ui.draggable.text()).append(placeholder).appendTo($(obj));

  // this is the same as the previous one
  placeholder.droppable({
    // put options here
    greedy: true,
    drop: function (event, ui) {
      makeItDroppableToo(event, ui, this);
    }
  });
}

函数makeItDroppableToo（e、ui、obj）{
$（obj）.find（“.placeholder”）.remove（）；
var placeholder=$（“
您也可以将其放在此处”
”；
$（“
”）.append（ui.draggable.text（））.append（占位符）.appendTo（$（obj））；
//这与前一个相同
占位符.可拖放({
//把期权放在这里
贪婪：没错，
drop：函数（事件、用户界面）{
makeItDroppableToo（事件、ui、this）；
}
});
}

function makeItDroppableToo(e, ui, obj) {
  $(obj).find(".placeholder").remove();

  var placeholder = $("<ol><li class='placeholder'>You can also drop it here</li></ol>");
  $("<li></li>").append(ui.draggable.text()).append(placeholder).appendTo($(obj));

  // this is the same as the previous one
  placeholder.droppable({
    // put options here
    greedy: true,
    drop: function (event, ui) {
      makeItDroppableToo(event, ui, this);
    }
  });
}