How to add a attribute to a dropped element in Drag and Drop using jquery?

Question

HI all i have an menu buider app using drag and drop...

**what i want to do is when ever i am adding a child to a parent menu i want to add a attirbute to the droped child element "parent=Mens"..ie

      suppose i had dropped "Mens" as main menu and I am dropping child "Shoe" as its child


                  <ol class="ui-droppable">
                      <li><a id="1001"> Mens</a>
                              <ol class="ui-droppable">
                                    //now here i am dropping child shoe
                                    //and here i want to add an attrbute parent
                                     <li><a id="2001" parent="Mens">Shoe</a> </li>

                                 </ol>
                              </li>
                      </ol>

so this is want i want to achieve can any one help me in doing this

here is my drag and droppable code for Menu Building

                      var i = 1;
    var z = 1;
    $(document).ready(function () {
        $("button[id='columnadd']").click(function () {
            // create the element
            var domElement = $('<div id="shoppingCart' + i++ + '" class="shoppingCart"><h2 class="ui-widget-header">Add Menu Items Here <img src="../Images/delete.png" id="shoppingCart' + z++ + '" style="float: right; cursor:pointer;" onclick="removecolumn(this.id)"/></h2><aside class="ui-widget-content" id="droppable"><ol><li class="placeholder">Add your items here</li></ol></aside></div>');
            var holder = "#columnholder";
            $("#columnholder").append(domElement);
            //$(this).after(domElement);

            // at this point we have domElement in our page

            // make it droppable
            domElement.find("ol").droppable({
                activeClass: "ui-state-default",
                accept: '.small_box li',
                greedy: true,
                drop: function (event, ui) {
                    makeItDroppableToo(event, ui, this);
                }
            });
        });
        function makeItDroppableToo(e, ui, obj) {
            $(obj).find(".placeholder").remove();
            var draggedID = ui.draggable.attr('id');
            alert(draggedID);
            //var placeholder = $("<ol><li>Add Sub Menu here</li></ol>");
            var placeholder = $("<ol><li class='submenuholder'>Drop SubMenu here</li></ol>");
            $("<li></li>").append('<a id="' + draggedID + '" draggable="true" droppable=true>' + ui.draggable.text() + '</a>').append(placeholder).appendTo($(obj));

            // this is the same as the previous one
            placeholder.droppable({
                greedy: true,
                // put options here
                drop: function (event, ui) {
                    makeItDroppableToo(event, ui, this);
                }
            });
        }
        $(".small_box li").draggable({
            appendTo: "body",
            helper: "clone"
        });
    });

please can any one help me out here

Answer 1

You can add attribute to dropped child like this

 function makeItDroppableToo(e, ui, obj) {
     $(ui.draggable).attr("parent","MENS");
 }

Take a look at this JQFAQ.com , it will be very helpful for jQuery developer.