0

大家好，我怎样才能获得拖动元素的 ID 并绑定我要放置元素的 id 这里是我为拖放所做的事情

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

这是我拖动的 html

         <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>

在这里我将拖动元素，当我这样做时，我想获取 id，当我在这里绑定拖动的元素时

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

我想将该ID绑定到，谁能告诉我我该怎么做

4

1 回答 1

1

在放置处理程序中，您可以使用ui.draggable.attr('id')来获取被拖动元素的 id。

IE

...
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(...);
},
...
于 2012-10-30T13:10:59.720 回答