0

Hi all i present i am wokring on Menu Builder,where user can come build his menu how ever he likes with the subemnus to,i have a problem in Drag and Drop, i had done till drag but drop is not working in my case

i have to achevie some thing like this

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

but not similar i should be able to create a chain or tree with drag and drop,my scenario is i have all menus listed at the bottom and and add column button at the top,when user wants to build menu he can click on addmenu button and a column opens there he can drag and drop the menus from the listed menu, from here i want the working scenario of the above link i had given where if i drop on any menu item it should be the child of that parent menu item which the user dropped on

here is my script

$(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(); }
   }
});

and here is my 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>

can any one help me over here please...that would be of a a great help for me..i am struggling with the Drop Event

1 Answer 1

0

Mistakes i had done

I had created a DOM Element (which is the drop area) upon click and this element is not in your page until you click the trigger. By doing $('#shoppingCart ol').droppable({...}) in $(document).ready(function() {}) block you try to add droppable to an element that even not in your page, so this won't do a thing.

changes

What i had done is make the element droppable after create that element

$("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);
    }
  });
});

and this is the function to make your dropped element has its own placeholder

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);
    }
  });
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.