如何使用jquery在拖放中向已删除的元素添加属性?

时间:2012-10-31 05:50:30

标签: javascript jquery drag-and-drop

我所有的菜单buider应用程序都使用拖放...

**我想要做的是当我将一个孩子添加到父菜单时,我想在droped子元素“parent = Mens”中添加一个attirbute ..即

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

请任何人帮助我

1 个答案:

答案 0 :(得分:4)

您可以像这样添加属性给被删除的孩子

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

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