如何使用jQuery在拖放中向拖放元素添加属性？

Question

大家好，我有使用拖放功能的菜单构建器应用程序...

**我想做的是，每当我将一个孩子添加到父菜单时，我都想向删除的孩子元素“ parent = Mens”中添加一个礼物。

      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>

所以这是我想要实现的，任何人都可以帮助我做到这一点

这是我用于菜单构建的可拖放代码

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

请任何人可以帮助我

Answer 1

您可以像这样向掉落的孩子添加属性

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

看看这个JQFAQ.com ，它将对jQuery开发人员非常有帮助。