大家好,我现在正在使用菜单生成器,用户可以在其中使用 subemnus 来构建他喜欢的菜单,我在拖放中遇到问题,我已经完成了拖放,但在我的情况下拖放不起作用
我必须完成这样的事情
http://www.prodevtips.com/demos/drag_drop_tree/
但不相似我应该能够通过拖放创建一个链或树,我的场景是我在底部列出了所有菜单并在顶部添加列按钮,当用户想要构建菜单时,他可以单击添加菜单按钮并在那里打开一列,他可以从列出的菜单中拖放菜单,从这里我想要上面链接的工作场景,如果我放在任何菜单项上,它应该是该父菜单项的子项用户掉到
这是我的脚本
$(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(); }
}
});
这是我的html
<body>
<button id="columnadd" >Add Column</button>
<aside class="menu-structer" id="AddColumns" >
</aside>
<aside class="small_box">
<h4>BRANDS</h4>
<ul>
<li id ="brand1"><a class="" href="#">Brand1</a></li>
<li id ="brand2"><a href="#">Brand2</a></li>
<li id ="brand3"><a href="#">Brand3</a></li>
<li id ="brand4"><a href="#">Brand4</a></li>
</ul>
</aside>
<aside class="small_box">
<h4>CATEGORIES</h4>
<ul>
<li id ="category1"><a href="#">Category1</a></li>
<li id="category2"><a href="#">Category2</a></li>
<li id="category3"><a href="#">Category3</a></li>
<li id="category4"><a href="#">Category4</a></li>
</ul>
</aside>
<aside class="small_box">
<h4>PRODUCTS</h4>
<ul>
<li id="Product1"><a href="#">Product1</a></li>
<li id="product2"><a href="#">Product2</a></li>
<li id="product3"><a href="#">Product3</a></li>
<li id="product4"><a href="#">Product4</a></li>
</ul>
</aside>
</body>
任何人都可以在这里帮我吗...这对我很有帮助..我正在为 Drop Event 苦苦挣扎