How can i get the Id of an Dragged Element and Bind while Dropping?

Question

Hi all how can i get the Id of on dragged element and bind the id where i am dropping the element here is what i am doing for my drag and drop

        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 you have domElement in your 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 id = this.id;
               alert(id);
               var placeholder = $("<ol><li>Add Sub Menu here</li></ol>");
               $("<li></li>").append('<a  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"
           });
       });

and this i my html from where i am dragging

         <div class="top-header"><span class="heading">Menu Builder</span><button id="preview" onclick="savemenu()" >Save</button><button id="columnadd" >Add Column</button></div>
<div id="columnholder" class="column-holder"></div>
<div class="clear"></div>
<div class="menu-items">    
<aside class="small_box">
     <div class="menu-item-header"><h4>BRANDS</h4></div>
      <ul>
             <li id ="1"><a id ="1001" class="" href="#">Brand1</a></li>
            <li id ="2"><a id ="1002" href="#">Brand2</a></li>
            <li id ="3"><a id ="1003" href="#">Brand3</a></li>
            <li id ="4"><a id ="1004" href="#">Brand4</a></li>
            <li id ="5"><a id ="1005" class="" href="#">Brand5</a></li>
            <li id ="6"><a id ="1006" href="#">Brand6</a></li>
            <li id ="7"><a id ="1007" href="#">Brand7</a></li>
            <li id ="8"><a id ="1008" href="#">Brand8</a></li>
     </ul>
    </aside>

here i will drag the element when i do that i want to get the id and when i am bind the dragged element here

           $("<li></li>").append('<a  draggable="true" droppable=true>' + ui.draggable.text() + '</a>').append(placeholder).appendTo($(obj));

i want to bind that id to the ,can any one tell me how can i do this

Answer 1

Inside the drop handler, you can use ui.draggable.attr('id') to get the id of the dragged element.

i.e.

...
drop: function(ev, ui) {

   /*
   // get id of dragged element   
   var draggedID = ui.draggable.attr('id');

   // bind it
   #('#'+draggedID).bind(...); // bind your events here
   */

   // why get the id, when you can bind it directly
   // will work with elements without an id too (credit to Rory McCrossan)
   ui.draggable.bind(...);
},
...