Question

大家好，我现在正在菜单生成器上工作，用户可以根据自己喜欢的方式来构建他的菜单，我有一个拖放问题，我已经完成了直到拖动但是掉线不起作用我的情况

我必须像这样做一些事情

http://www.prodevtips.com/demos/drag_drop_tree/

但不相似我应该能够通过拖放创建链或树，我的场景是我在底部列出所有菜单，并在顶部添加列按钮，当用户想要构建菜单时，他可以单击在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(); }
   }
});

这是我的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事件

Answer 1

我做错了

我在点击后创建了一个DOM元素（这是一个放置区域），在您单击触发器之前，此元素不在您的页面中。通过在$('#shoppingCart ol').droppable({...})阻止中执行$(document).ready(function() {})，您尝试将droppable添加到甚至不在您网页中的元素中，因此这不会做任何事情。

更改

我所做的是在创建该元素之后使元素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); } }); });

这是使被删除元素具有自己的占位符
的函数
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); } }); }

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

1 个答案: