title: How to add a attribute to a dropped element in Drag and Drop using jquery?
body: <p>HI all i have an menu buider app using drag and drop...</p>
  
  <p>**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"..i.e</p>
  
  <pre><code>      suppose i had dropped "Mens" as main menu and I am dropping child "Shoe" as its child
  
  
                    &lt;ol class="ui-droppable"&gt;
                        &lt;li&gt;&lt;a id="1001"&gt; Mens&lt;/a&gt;
                                &lt;ol class="ui-droppable"&gt;
                                      //now here i am dropping child shoe
                                      //and here i want to add an attrbute parent
                                       &lt;li&gt;&lt;a id="2001" parent="Mens"&gt;Shoe&lt;/a&gt; &lt;/li&gt;
  
                                   &lt;/ol&gt;
                                &lt;/li&gt;
                        &lt;/ol&gt;
  </code></pre>
  
  <p>so this is want i want to achieve can any one help me in doing this</p>
  
  <p>here is my drag and droppable code for Menu Building</p>
  
  <pre><code>                      var i = 1;
      var z = 1;
      $(document).ready(function () {
          $("button[id='columnadd']").click(function () {
              // create the element
              var domElement = $('&lt;div id="shoppingCart' + i++ + '" class="shoppingCart"&gt;&lt;h2 class="ui-widget-header"&gt;Add Menu Items Here &lt;img src="../Images/delete.png" id="shoppingCart' + z++ + '" style="float: right; cursor:pointer;" onclick="removecolumn(this.id)"/&gt;&lt;/h2&gt;&lt;aside class="ui-widget-content" id="droppable"&gt;&lt;ol&gt;&lt;li class="placeholder"&gt;Add your items here&lt;/li&gt;&lt;/ol&gt;&lt;/aside&gt;&lt;/div&gt;');
              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 = $("&lt;ol&gt;&lt;li&gt;Add Sub Menu here&lt;/li&gt;&lt;/ol&gt;");
              var placeholder = $("&lt;ol&gt;&lt;li class='submenuholder'&gt;Drop SubMenu here&lt;/li&gt;&lt;/ol&gt;");
              $("&lt;li&gt;&lt;/li&gt;").append('&lt;a id="' + draggedID + '" draggable="true" droppable=true&gt;' + ui.draggable.text() + '&lt;/a&gt;').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"
          });
      });
  </code></pre>
  
  <p>please can any one help me out here</p>