0

大家好，我现在正在使用菜单生成器，用户可以在其中使用 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 苦苦挣扎

4

1 回答 1

0

我犯过的错误

我在单击时创建了一个 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);
    }
  });
}
于 2012-10-30T06:00:24.250 回答