2012-10-31 4 views
0

Tout ce que j'ai une application de menu de menu en utilisant le glisser-déposer ...Comment ajouter un attribut à un élément déposé dans Drag and Drop à l'aide de jquery?

** ce que je veux faire est quand jamais j'ajoute un enfant à un menu parent, je veux ajouter un attirbute à l'enfant abandonné élément « parent = Hommes » .. à savoir

 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> 

donc ce que je veux est veux d'atteindre quelqu'un peut me aider à faire ce

voici mon glisser le code largable pour 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" 
     }); 
    }); 

s'il vous plaît quelqu'un peut me aider

Répondre

4

Vous pouvez ajouter attribut abandonné enfant comme celui-ci

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

Jetez un oeil à ce JQFAQ.com, il sera très utile pour les développeurs jQuery.