CODEWITHSUNDEEP
javascriptjqueryjquery-uidrag-and-dropjquery-ui-draggable
Joshua Thomas
Joshua Thomas

Reputation: 1

Not able to drag appended items

I'm trying to make an appended item draggable using jquery ui, With jquery I'm trying to say when a veggie is clicked add it to the dirt. make the veggies draggable in the dirt but be constrained within that element. Is there a reason the following code isn't working? 

<body>
  <ul id = "dirt">  
  </ul>    
  <ul id = "veggies">
    <li class ="veg tomato"></li>
    <li class ="veg cucumber"></li>
    <li class ="veg pepper"></li>
    <li class ="veg eggplant"></li>
    <li class ="veg beans"></li>
  </ul>
 <script>
  $(document).ready(function(){
  $("#veggies li").click(function(){
    $(this).clone().appendTo("#dirt");
    });
  $("#dirt li").draggable({
    containment: '#dirt'
  });
}); 
</body>

Upvotes: 0

Views: 45

Answers (2)

Papa Hotel
Papa Hotel

Reputation: 1

It looks like you should be making your #veggies list items draggable instead of appending them on click.

This ought to work.

$(document).ready(function(){

 $("#veggies li").draggable(function(){
  $(this).clone().appendTo("#dirt")
 });
});

Upvotes: 0

Rob Wood
Rob Wood

Reputation: 415

You need to make the element draggable AFTER you append it, as shown in this fiddle: https://jsfiddle.net/5b3nfm11/1/

$(document).ready(function(){

  $("#veggies li").click(function(){
    $(this).clone().appendTo("#dirt").draggable({
      containment: '#dirt'
    });

  });

});

Upvotes: 1

Related Questions